921 lines
30 KiB
HTML
Generated
921 lines
30 KiB
HTML
Generated
|
|
<!--
|
|
Licensed to the Apache Software Foundation (ASF) under one
|
|
or more contributor license agreements. See the NOTICE file
|
|
distributed with this work for additional information
|
|
regarding copyright ownership. The ASF licenses this file
|
|
to you under the Apache License, Version 2.0 (the
|
|
"License"); you may not use this file except in compliance
|
|
with the License. You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing,
|
|
software distributed under the License is distributed on an
|
|
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
KIND, either express or implied. See the License for the
|
|
specific language governing permissions and limitations
|
|
under the License.
|
|
-->
|
|
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="lib/simpleRequire.js"></script>
|
|
<script src="lib/config.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" href="lib/reset.css" />
|
|
<script src="lib/testHelper.js"></script>
|
|
<script src="tooltipTestHelper.js"></script>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
h1 {
|
|
line-height: 60px;
|
|
height: 60px;
|
|
background: #a60;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: #eee;
|
|
font-size: 14px;
|
|
}
|
|
.chart {
|
|
height: 350px;
|
|
}
|
|
</style>
|
|
|
|
|
|
<h1>time axis default | data zoom | animation auto: zoom in has animation, zoom out no animation</h1>
|
|
<div class="chart" id="time-animation"></div>
|
|
<h1>category axis default | data zoom | animation auto: zoom in has animation, zoom out no animation</h1>
|
|
<div class="chart" id="category-animation"></div>
|
|
<h1>time axis cross | x snap | label show | tooltip show</h1>
|
|
<div class="chart" id="time-cross"></div>
|
|
<h1>axis label too long | x axis label rotate | label should not overflow ec container</h1>
|
|
<div class="chart" id="label-rotate"></div>
|
|
<h1>two value axes | snap | grid.tooltip setting | snap has animation </h1>
|
|
<div class="chart" id="two-value-axes"></div>
|
|
<h1>label style and formatter</h1>
|
|
<div class="chart" id="label-style"></div>
|
|
<h1>dual yAxes | label color auto : the same as axisline</h1>
|
|
<div class="chart" id="dual-yAxes"></div>
|
|
<h1>dual xAxes | label color auto : the same as axisline</h1>
|
|
<div class="chart" id="dual-xAxes"></div>
|
|
<h1>y is category</h1>
|
|
<div class="chart" id="y-is-category"></div>
|
|
<h1>value axis as base | y axis should not trigger tooltip | tooltip.trigger: 'none' so item tooltip will not be triggered</h1>
|
|
<div class="chart" id="value-axis-as-base"></div>
|
|
<h1>polar category</h1>
|
|
<div class="chart" id="polar-category"></div>
|
|
<h1>multiple points with the same axis value | when not snap tooltip should be correct</h1>
|
|
<div class="chart" id="same-value"></div>
|
|
<h1>no tooltip</h1>
|
|
<div class="chart" id="no-tooltip"></div>
|
|
<h1>axisPointer.type: 'none', but label.show: true</h1>
|
|
<div class="chart" id="none"></div>
|
|
<h1>tooltip.axisPointer.label.show: fasle</h1>
|
|
<div class="chart" id="tooltip.axisPointer.label.show: fasle"></div>
|
|
|
|
|
|
<script>
|
|
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
dataZoom: [{
|
|
type: 'inside'
|
|
}, {
|
|
type: 'slider'
|
|
}]
|
|
};
|
|
var baseTop = 90;
|
|
var height = 250;
|
|
var gap = 30;
|
|
makeTimeGrid(option, {
|
|
grid: {left: 100, top: baseTop, height: height}
|
|
});
|
|
baseTop += height + gap;
|
|
|
|
createChart('time-animation', echarts, option, baseTop + 40);
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
dataZoom: [{
|
|
type: 'inside',
|
|
start: 40,
|
|
end: 60
|
|
}, {
|
|
type: 'slider',
|
|
start: 40,
|
|
end: 60
|
|
}]
|
|
};
|
|
var baseTop = 90;
|
|
var height = 250;
|
|
var gap = 30;
|
|
makeCategoryGrid(option, {
|
|
grid: {left: 100, top: baseTop, height: height},
|
|
xAxis: {boundaryGap: true}
|
|
}, false, 100, 'bar');
|
|
baseTop += height + gap;
|
|
|
|
createChart('category-animation', echarts, option, baseTop + 40);
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {type: 'cross'}
|
|
}
|
|
};
|
|
var baseTop = 90;
|
|
var height = 250;
|
|
var gap = 50;
|
|
makeTimeGrid(option, {
|
|
grid: {left: 100, top: baseTop, height: height},
|
|
yAxis: {
|
|
axisTick: {
|
|
inside: true
|
|
},
|
|
axisLabel: {
|
|
inside: true
|
|
}
|
|
}
|
|
});
|
|
baseTop += height + gap;
|
|
|
|
createChart('time-cross', echarts, option, baseTop + 100);
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {type: 'cross'}
|
|
}
|
|
};
|
|
var baseTop = 90;
|
|
makeCategoryGrid(option, {
|
|
grid: {
|
|
containLabel: true, left: 5, right: 10, top: baseTop, height: 140
|
|
},
|
|
xAxis: {
|
|
axisLabel: {
|
|
rotate: 30,
|
|
formatter: function (value) {
|
|
return echarts.format.truncateText(value, 50);
|
|
}
|
|
}
|
|
}
|
|
}, null, null, null, 'toolonglonglonglonglonglonglong');
|
|
|
|
createChart('label-rotate', echarts, option, baseTop + 200);
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'none'
|
|
}
|
|
};
|
|
var baseTop = 90;
|
|
var height = 250;
|
|
var gap = 50;
|
|
makeValueGrid(option, {
|
|
grid: {
|
|
top: baseTop, height: height,
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {name: 'tooltip.trigger: "axis"\nso base axis snap and animate by default'}
|
|
}, true);
|
|
baseTop += height + gap;
|
|
makeValueGrid(option, {
|
|
grid: {
|
|
top: baseTop, height: height
|
|
},
|
|
xAxis: {
|
|
axisPointer: {
|
|
show: true,
|
|
snap: true,
|
|
triggerTooltip: true
|
|
}
|
|
},
|
|
yAxis: {
|
|
name: 'both axes snap\nand so animate by default',
|
|
axisPointer: {
|
|
show: true,
|
|
snap: true,
|
|
triggerTooltip: true
|
|
}
|
|
}
|
|
}, true);
|
|
baseTop += height + gap;
|
|
|
|
var dom = document.getElementById('two-value-axes');
|
|
if (dom) {
|
|
dom.style.height = baseTop + 'px';
|
|
var chart = echarts.init(dom);
|
|
chart.setOption(option);
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
axisPointer: {
|
|
label: {
|
|
backgroundColor: 'blue',
|
|
borderColor: 'green',
|
|
borderRadius: 5,
|
|
borderWidth: 2,
|
|
shadowBlur: 6,
|
|
shadowOffsetX: 3,
|
|
shadowOffsetY: 3,
|
|
shadowColor: '#000'
|
|
}
|
|
}
|
|
};
|
|
var baseTop = 90;
|
|
var height = 150;
|
|
var gap = 50;
|
|
makeCategoryGrid(option, {
|
|
grid: {top: baseTop, height: height},
|
|
xAxis: {
|
|
axisPointer: {show: true}
|
|
},
|
|
yAxis: {name: 'global style: \nbg: "blue", border: "green", shadow, borderRadius'}
|
|
});
|
|
baseTop += height + gap;
|
|
makeCategoryGrid(option, {
|
|
grid: {top: baseTop, height: height},
|
|
xAxis: {
|
|
axisPointer: {
|
|
show: true,
|
|
label: {
|
|
backgroundColor: 'red',
|
|
borderWidth: 0
|
|
}
|
|
}
|
|
},
|
|
yAxis: {name: 'xAxis style: \nbg: "red", borderWidth: 0'}
|
|
});
|
|
baseTop += height + gap;
|
|
makeCategoryGrid(option, {
|
|
grid: {
|
|
top: baseTop,
|
|
height: height
|
|
},
|
|
xAxis: {
|
|
position: 'top',
|
|
axisPointer: {
|
|
show: true,
|
|
label: {
|
|
show: true,
|
|
formatter: '类别 {value} %'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {name: 'axisLabel formatter string'}
|
|
});
|
|
baseTop += height + gap;
|
|
makeCategoryGrid(option, {
|
|
grid: {
|
|
top: baseTop,
|
|
height: height
|
|
},
|
|
xAxis: {
|
|
axisPointer: {
|
|
show: true,
|
|
label: {
|
|
show: true,
|
|
formatter: function(params) {
|
|
return 'x: ' + params.value + '\n'
|
|
+ echarts.util.map(params.seriesData, function (item) {
|
|
return item.name + ': ' + item.value;
|
|
}).join('\n')
|
|
}
|
|
}
|
|
}
|
|
},
|
|
yAxis: {name: 'axisLabel formatter function'}
|
|
});
|
|
baseTop += height + gap + 20;
|
|
|
|
var dom = document.getElementById('label-style');
|
|
if (dom) {
|
|
dom.style.height = baseTop + 'px';
|
|
var chart = echarts.init(dom);
|
|
chart.setOption(option);
|
|
}
|
|
})
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
formatter: function (params) {
|
|
console.log(params);
|
|
return 'asdfa';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
makeCategoryCartesian(option, {
|
|
}, 0, 0);
|
|
makeCategoryCartesian(option, {
|
|
}, 0, 1, 17);
|
|
makeCategoryCartesian(option, {
|
|
yAxis: {
|
|
offset: 50
|
|
}
|
|
}, 0, 2, 117);
|
|
makeCategoryCartesian(option, {
|
|
yAxis: {
|
|
position: 'left',
|
|
offset: 50
|
|
}
|
|
}, 0, 3, 1117);
|
|
|
|
var dom = document.getElementById('dual-yAxes');
|
|
if (dom) {
|
|
var chart = echarts.init(dom);
|
|
chart.setOption(option);
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross'
|
|
}
|
|
}
|
|
};
|
|
makeCategoryCartesian(option, {
|
|
xAxis: {
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
}
|
|
}, 0, 0);
|
|
makeCategoryCartesian(option, {
|
|
xAxis: {
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
}
|
|
}, 1, 0, 17, 'last');
|
|
|
|
var dom = document.getElementById('dual-xAxes');
|
|
if (dom) {
|
|
var chart = echarts.init(dom);
|
|
chart.setOption(option);
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
}
|
|
};
|
|
var baseTop = 90;
|
|
var height = 150;
|
|
var gap = 50;
|
|
makeCategoryGrid(option, {
|
|
grid: {top: baseTop, height: height},
|
|
xAxis: {
|
|
axisPointer: {
|
|
show: true,
|
|
triggerTooltip: false
|
|
}
|
|
}
|
|
}, true);
|
|
baseTop += height + gap;
|
|
|
|
var dom = document.getElementById('y-is-category');
|
|
if (dom) {
|
|
var chart = echarts.init(dom);
|
|
chart.setOption(option);
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'none'
|
|
}
|
|
};
|
|
var baseTop = 90;
|
|
var height = 150;
|
|
var gap = 50;
|
|
makeCategoryGrid(option, {
|
|
grid: {top: baseTop, height: height},
|
|
xAxis: {
|
|
axisPointer: {
|
|
show: true
|
|
}
|
|
},
|
|
yAxis: {
|
|
axisPointer: {
|
|
show: true,
|
|
triggerTooltip: false,
|
|
animation: true
|
|
}
|
|
}
|
|
}, true);
|
|
baseTop += height + gap;
|
|
|
|
var dom = document.getElementById('value-axis-as-base');
|
|
if (dom) {
|
|
var chart = echarts.init(dom);
|
|
chart.setOption(option);
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {type: 'cross'}
|
|
}
|
|
};
|
|
var baseTop = 90;
|
|
var height = 250;
|
|
var gap = 50;
|
|
makeCategoryPolar(option, {
|
|
polar: {
|
|
center: ['25%', baseTop + height / 2],
|
|
radius: 120
|
|
}
|
|
}, true);
|
|
makeCategoryPolar(option, {
|
|
polar: {
|
|
center: ['75%', baseTop + height / 2],
|
|
radius: 120
|
|
},
|
|
angleAxis: {
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
}
|
|
}, true);
|
|
baseTop += height + gap;
|
|
makeCategoryPolar(option, {
|
|
polar: {
|
|
center: ['25%', baseTop + height / 2],
|
|
radius: 120
|
|
}
|
|
});
|
|
makeCategoryPolar(option, {
|
|
polar: {
|
|
center: ['75%', baseTop + height / 2],
|
|
radius: 120
|
|
},
|
|
radiusAxis: {
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
}
|
|
});
|
|
baseTop += height + gap;
|
|
|
|
createChart('polar-category', echarts, option, baseTop);
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross'
|
|
}
|
|
},
|
|
xAxis: [{
|
|
nameLocation: 'middle',
|
|
nameGap: 30,
|
|
name: 'snap: show display both value'
|
|
}, {
|
|
gridIndex: 1,
|
|
nameLocation: 'middle',
|
|
nameGap: 30,
|
|
name: 'not snap: put axis on the middle of the two points, should display only one value.'
|
|
}, {
|
|
gridIndex: 2,
|
|
nameLocation: 'middle',
|
|
nameGap: 30,
|
|
name: 'step line not snap: should tooltip correct.',
|
|
axisPointer: {
|
|
snap: false
|
|
}
|
|
}],
|
|
yAxis: [{}, {gridIndex: 1}, {gridIndex: 2}],
|
|
grid: [{
|
|
top: 10,
|
|
height: 100
|
|
}, {
|
|
top: 200,
|
|
height: 100
|
|
}, {
|
|
top: 400,
|
|
height: 200
|
|
}],
|
|
series: [{
|
|
type: 'line',
|
|
data: [[10, 10], [10, 20], [20, 20]]
|
|
}, {
|
|
type: 'line',
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 1,
|
|
data: [[10, 10], [30, 10]]
|
|
}, {
|
|
xAxisIndex: 2,
|
|
yAxisIndex: 2,
|
|
name:'Step Start',
|
|
type:'line',
|
|
step: 'start',
|
|
data: echarts.util.map([120, 132, 101, 134, 90, 230, 210], function (value, index) {
|
|
return [index * 100, value];
|
|
})
|
|
}, {
|
|
xAxisIndex: 2,
|
|
yAxisIndex: 2,
|
|
name:'Step Middle',
|
|
type:'line',
|
|
step: 'middle',
|
|
data: echarts.util.map([220, 282, 201, 234, 290, 430, 410], function (value, index) {
|
|
return [index * 100, value];
|
|
})
|
|
}, {
|
|
xAxisIndex: 2,
|
|
yAxisIndex: 2,
|
|
name:'Step End',
|
|
type:'line',
|
|
step: 'end',
|
|
data: echarts.util.map([450, 432, 401, 454, 590, 530, 510], function (value, index) {
|
|
return [index * 100, value];
|
|
})
|
|
}]
|
|
};
|
|
|
|
createChart('same-value', echarts, option, 700);
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
};
|
|
var baseTop = 90;
|
|
var height = 150;
|
|
var gap = 50;
|
|
makeCategoryGrid(option, {
|
|
grid: {top: baseTop, height: height},
|
|
yAxis: {name: 'axisPointer: not show by default'}
|
|
});
|
|
baseTop += height + gap;
|
|
makeCategoryGrid(option, {
|
|
grid: {top: baseTop, height: height},
|
|
xAxis: {axisPointer: {show: true}},
|
|
yAxis: {name: 'axisPointer: show if specified'}
|
|
});
|
|
baseTop += height + gap;
|
|
|
|
var dom = document.getElementById('no-tooltip');
|
|
if (dom) {
|
|
dom.style.height = baseTop + 'px';
|
|
var chart = echarts.init(dom);
|
|
chart.setOption(option);
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {type: 'none', label: {show: true}}
|
|
}
|
|
};
|
|
var baseTop = 90;
|
|
var height = 250;
|
|
var gap = 50;
|
|
makeCategoryPolar(option, {
|
|
polar: {
|
|
center: ['25%', baseTop + height / 2],
|
|
radius: 120
|
|
}
|
|
}, true);
|
|
makeCategoryGrid(option, {
|
|
grid: {left: '50%', top: baseTop, height: height},
|
|
xAxis: {boundaryGap: true}
|
|
}, false, 100, 'bar');
|
|
baseTop += height + gap;
|
|
|
|
option.singleAxis = {
|
|
axisTick: {},
|
|
axisLabel: {},
|
|
top: baseTop,
|
|
height: height,
|
|
bottom: 10,
|
|
type: 'time'
|
|
};
|
|
option.series.push({
|
|
type: 'themeRiver',
|
|
itemStyle: {
|
|
emphasis: {
|
|
shadowBlur: 20,
|
|
shadowColor: 'rgba(0, 0, 0, 0.8)'
|
|
}
|
|
},
|
|
data: [['2015/11/08',10,'DQ'],['2015/11/09',15,'DQ'],['2015/11/10',35,'DQ'],
|
|
// ['2015/11/11',38,'DQ'],['2015/11/12',22,'DQ'],['2015/11/13',16,'DQ'],
|
|
['2015/11/14',7,'DQ'],['2015/11/15',2,'DQ'],['2015/11/16',17,'DQ'],
|
|
['2015/11/17',33,'DQ'],['2015/11/18',40,'DQ'],['2015/11/19',32,'DQ'],
|
|
['2015/11/20',26,'DQ'],['2015/11/21',35,'DQ'],['2015/11/22',40,'DQ'],
|
|
['2015/11/23',32,'DQ'],['2015/11/24',26,'DQ'],['2015/11/25',22,'DQ'],
|
|
// ['2015/11/26',16,'DQ'],['2015/11/27',22,'DQ'],['2015/11/28',10,'DQ'],
|
|
['2015/11/08',35,'TY'],['2015/11/09',36,'TY'],['2015/11/10',37,'TY'],
|
|
['2015/11/11',22,'TY'],['2015/11/12',24,'TY'],['2015/11/13',26,'TY'],
|
|
['2015/11/14',34,'TY'],['2015/11/15',21,'TY'],['2015/11/16',18,'TY'],
|
|
['2015/11/17',45,'TY'],['2015/11/18',32,'TY'],['2015/11/19',35,'TY'],
|
|
['2015/11/20',30,'TY'],['2015/11/21',28,'TY'],['2015/11/22',27,'TY'],
|
|
['2015/11/23',26,'TY'],['2015/11/24',15,'TY'],['2015/11/25',30,'TY'],
|
|
['2015/11/26',35,'TY'],['2015/11/27',42,'TY'],['2015/11/28',42,'TY'],
|
|
['2015/11/08',21,'SS'],['2015/11/09',25,'SS'],['2015/11/10',27,'SS'],
|
|
['2015/11/11',23,'SS'],['2015/11/12',24,'SS'],['2015/11/13',21,'SS'],
|
|
['2015/11/14',35,'SS'],['2015/11/15',39,'SS'],['2015/11/16',40,'SS'],
|
|
['2015/11/17',36,'SS'],['2015/11/18',33,'SS'],['2015/11/19',43,'SS'],
|
|
['2015/11/20',40,'SS'],['2015/11/21',34,'SS'],['2015/11/22',28,'SS'],
|
|
// ['2015/11/23',26,'SS'],['2015/11/24',37,'SS'],['2015/11/25',41,'SS'],
|
|
// ['2015/11/26',46,'SS'],['2015/11/27',47,'SS'],['2015/11/28',41,'SS'],
|
|
// ['2015/11/08',10,'QG'],['2015/11/09',15,'QG'],['2015/11/10',35,'QG'],
|
|
// ['2015/11/11',38,'QG'],['2015/11/12',22,'QG'],['2015/11/13',16,'QG'],
|
|
['2015/11/14',7,'QG'],['2015/11/15',2,'QG'],['2015/11/16',17,'QG'],
|
|
['2015/11/17',33,'QG'],['2015/11/18',40,'QG'],['2015/11/19',32,'QG'],
|
|
['2015/11/20',26,'QG'],['2015/11/21',35,'QG'],['2015/11/22',40,'QG'],
|
|
['2015/11/23',32,'QG'],['2015/11/24',26,'QG'],['2015/11/25',22,'QG'],
|
|
['2015/11/26',16,'QG'],['2015/11/27',22,'QG'],['2015/11/28',10,'QG'],
|
|
['2015/11/08',10,'SY'],['2015/11/09',15,'SY'],['2015/11/10',35,'SY'],
|
|
['2015/11/11',38,'SY'],['2015/11/12',22,'SY'],['2015/11/13',16,'SY'],
|
|
['2015/11/14',7,'SY'],['2015/11/15',2,'SY'],['2015/11/16',17,'SY'],
|
|
['2015/11/17',33,'SY'],['2015/11/18',40,'SY'],['2015/11/19',32,'SY'],
|
|
['2015/11/20',26,'SY'],['2015/11/21',35,'SY'],['2015/11/22',4,'SY'],
|
|
['2015/11/23',32,'SY'],['2015/11/24',26,'SY'],['2015/11/25',22,'SY'],
|
|
['2015/11/26',16,'SY'],['2015/11/27',22,'SY'],['2015/11/28',10,'SY'],
|
|
['2015/11/08',10,'DD'],['2015/11/09',15,'DD'],['2015/11/10',35,'DD'],
|
|
['2015/11/11',38,'DD'],['2015/11/12',22,'DD'],['2015/11/13',16,'DD'],
|
|
['2015/11/14',7,'DD'],['2015/11/15',2,'DD'],['2015/11/16',17,'DD'],
|
|
['2015/11/17',33,'DD'],['2015/11/18',4,'DD'],['2015/11/19',32,'DD'],
|
|
['2015/11/20',26,'DD'],['2015/11/21',35,'DD'],['2015/11/22',40,'DD'],
|
|
['2015/11/23',32,'DD'],['2015/11/24',26,'DD'],['2015/11/25',22,'DD'],
|
|
['2015/11/26',16,'DD'],['2015/11/27',22,'DD'],['2015/11/28',10,'DD']]
|
|
});
|
|
baseTop += height + gap;
|
|
|
|
createChart('none', echarts, option, baseTop);
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
xAxis: {type: 'category'},
|
|
yAxis: {},
|
|
series: {
|
|
type: 'scatter',
|
|
data: [
|
|
['2015/11/08',10,'DQ'],['2015/11/09',15,'DQ'],['2015/11/10',35,'DQ'],
|
|
['2015/11/14',7,'DQ'],['2015/11/15',2,'DQ'],['2015/11/16',17,'DQ'],
|
|
['2015/11/17',33,'DQ'],['2015/11/18',40,'DQ'],['2015/11/19',32,'DQ'],
|
|
['2015/11/20',26,'DQ'],['2015/11/21',35,'DQ'],['2015/11/22',40,'DQ'],
|
|
['2015/11/23',32,'DQ'],['2015/11/24',26,'DQ'],['2015/11/25',22,'DQ'],
|
|
// ['2015/11/26',16,'DQ'],['2015/11/27',22,'DQ'],['2015/11/28',10,'DQ'],
|
|
['2015/11/08',35,'TY'],['2015/11/09',36,'TY'],['2015/11/10',37,'TY'],
|
|
['2015/11/11',22,'TY'],['2015/11/12',24,'TY'],['2015/11/13',26,'TY'],
|
|
['2015/11/14',34,'TY'],['2015/11/15',21,'TY'],['2015/11/16',18,'TY'],
|
|
['2015/11/17',45,'TY'],['2015/11/18',32,'TY'],['2015/11/19',35,'TY'],
|
|
['2015/11/20',30,'TY'],['2015/11/21',28,'TY'],['2015/11/22',27,'TY']
|
|
]
|
|
}
|
|
};
|
|
|
|
createChart('tooltip.axisPointer.label.show: fasle', echarts, option);
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html> |