bob
/
g214
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
g214/static/bower_components/echarts/test/areaLineUpdate.html

375 lines
17 KiB
HTML
Raw Normal View History

init
2018-08-20 08:21:25 +00:00
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="esl.js"></script>
<script src="config.js"></script>
<script src="lib/facePrint.js"></script>
</head>
<body>
<style>
html, body, .main {
padding: 0;
margin: 0;
width: 100%;
height: 300px;
}
.label {
background: rgba(00, 200, 00, 0.4);
padding: 10px;
text-align: center;
}
</style>
<div class="label">different category value | with ainmation | 3 times setOption</div>
<div class="main" id="main0"></div>
<div class="label">different category value | with ainmation | 3 times setOption | step</div>
<div class="main" id="main1"></div>
<div class="label">same category value | with ainmation | 2 times setOption</div>
<div class="main" id="main2"></div>
<!-- ==================== -->
<!-- Test Case 1 -->
<script>
var option0 = {"tooltip":{"trigger":"axis","enterable":true,"padding":[10],"showDelay":100,"hideDelay":100,"z":0,"axisPointer":{"lineStyle":{"color":"#999"}},"textStyle":{"color":"#333"},"borderColor":"#ececec","borderWidth":1,"backgroundColor":"rgb(255,255,255)","extraCssText":"width: 200px;height: 80px;border-radius: 3px;z-index: 100;"},"grid":{"left":72,"right":77},"xAxis":{"type":"category","boundaryGap":false,"axisLine":{"show":true,"lineStyle":{"color":"#f2f2f2","width":1}},"z":0,"axisTick":false,"splitLine":{"show":false},"axisLabel":{"textStyle":{"color":"#ccc"}},"data":
["2016-07-23","2016-07-25","2016-07-26","2016-07-27","2016-07-28","2016-07-29","2016-07-30","2016-08-01","2016-08-02","2016-08-03","2016-08-05","2016-08-06","2016-08-08","2016-08-09","2016-08-10","2016-08-11","2016-08-12","2016-08-15","2016-08-16","2016-08-17","2016-08-18","2016-08-19","2016-08-20","2016-08-22"]
},"yAxis":{"type":"value","z":0,"min":0,"max":100,"interval":20,"positon":"right","boundaryGap":false,"axisLine":{"show":true,"lineStyle":{"color":"#f2f2f2","width":1}},"axisTick":false,"splitLine":{"lineStyle":{"color":"#f2f2f2"}},"axisLabel":{"textStyle":{"color":"#ccc"}}},"dataZoom":[{"show":false},{"show":true,"z":0,"type":"slider","fillerColor":"rgba(230,230,230,.3)","dataBackground":{"areaStyle":{"color":"rgb(210,210,210)"}}}],"series":[{"type":"line","smooth":true,"symbol":"emptyCircle","itemStyle":{"normal":{"color":"rgb(255, 223, 190)"}},"z":0,"areaStyle":{"normal":{"color":"rgb(255, 242, 230)"}},"showAllSymbol":true,"data":
["69","65","65","64","63","69","66","67","66","66","63","62","68","66","65","70","70","71","70","58","66","68","67","62"]
}]}
var option1 = {"tooltip":{"trigger":"axis","enterable":true,"padding":[10],"showDelay":100,"hideDelay":100,"z":0,"axisPointer":{"lineStyle":{"color":"#999"}},"textStyle":{"color":"#333"},"borderColor":"#ececec","borderWidth":1,"backgroundColor":"rgb(255,255,255)","extraCssText":"width: 200px;height: 80px;border-radius: 3px;z-index: 100;"},"grid":{"left":72,"right":77},"xAxis":{"type":"category","boundaryGap":false,"axisLine":{"show":true,"lineStyle":{"color":"#f2f2f2","width":1}},"z":0,"axisTick":false,"splitLine":{"show":false},"axisLabel":{"textStyle":{"color":"#ccc"}},"data":
["2016-05-24","2016-05-25","2016-05-26","2016-05-27","2016-05-30","2016-06-01","2016-06-02","2016-06-03","2016-06-06","2016-06-13","2016-06-14","2016-06-15","2016-06-16","2016-06-17","2016-06-23","2016-06-24","2016-06-27","2016-06-28","2016-06-29","2016-06-30","2016-07-01","2016-07-04","2016-07-05","2016-07-06","2016-07-07","2016-07-11","2016-07-13","2016-07-14","2016-07-15","2016-07-18","2016-07-20","2016-07-21","2016-07-22","2016-07-23","2016-07-25","2016-07-26","2016-07-27","2016-07-28","2016-07-29","2016-07-30","2016-08-01","2016-08-02","2016-08-03","2016-08-05","2016-08-06","2016-08-08","2016-08-09","2016-08-10","2016-08-11","2016-08-12","2016-08-15","2016-08-16","2016-08-17","2016-08-18","2016-08-19","2016-08-20","2016-08-22"]
},"yAxis":{"type":"value","z":0,"min":0,"max":100,"interval":20,"positon":"right","boundaryGap":false,"axisLine":{"show":true,"lineStyle":{"color":"#f2f2f2","width":1}},"axisTick":false,"splitLine":{"lineStyle":{"color":"#f2f2f2"}},"axisLabel":{"textStyle":{"color":"#ccc"}}},"dataZoom":[{"show":false},{"show":true,"z":0,"type":"slider","fillerColor":"rgba(230,230,230,.3)","dataBackground":{"areaStyle":{"color":"rgb(210,210,210)"}}}],"series":[{"type":"line","smooth":true,"symbol":"emptyCircle","itemStyle":{"normal":{"color":"rgb(255, 223, 190)"}},"z":0,"areaStyle":{"normal":{"color":"rgb(255, 242, 230)"}},"showAllSymbol":true,"data":
["66","66","61","59","59","57","61","63","61","65","65","65","66","70","60","62","66","66","66","70","64","66","68","69","71","67","69","71","68","69","68","69","67","69","65","65","64","63","69","66","67","66","66","63","62","68","66","65","70","70","71","70","58","66","68","67","62"]
}]}
var option2 = {"tooltip":{"trigger":"axis","enterable":true,"padding":[10],"showDelay":100,"hideDelay":100,"z":0,"axisPointer":{"lineStyle":{"color":"#999"}},"textStyle":{"color":"#333"},"borderColor":"#ececec","borderWidth":1,"backgroundColor":"rgb(255,255,255)","extraCssText":"width: 200px;height: 80px;border-radius: 3px;z-index: 100;"},"grid":{"left":72,"right":77},"xAxis":{"type":"category","boundaryGap":false,"axisLine":{"show":true,"lineStyle":{"color":"#f2f2f2","width":1}},"z":0,"axisTick":false,"splitLine":{"show":false},"axisLabel":{"textStyle":{"color":"#ccc"}},"data":
["2016-02-24","2016-02-25","2016-02-26","2016-02-29","2016-03-01","2016-03-02","2016-03-03","2016-03-04","2016-03-07","2016-03-08","2016-03-09","2016-03-10","2016-03-11","2016-03-15","2016-03-16","2016-03-17","2016-03-18","2016-03-21","2016-03-22","2016-03-23","2016-03-24","2016-03-25","2016-03-28","2016-03-29","2016-03-30","2016-03-31","2016-04-01","2016-04-06","2016-04-07","2016-04-08","2016-04-11","2016-04-12","2016-04-13","2016-04-14","2016-04-18","2016-04-20","2016-04-21","2016-04-22","2016-04-26","2016-04-27","2016-04-28","2016-05-05","2016-05-06","2016-05-09","2016-05-10","2016-05-12","2016-05-13","2016-05-16","2016-05-17","2016-05-19","2016-05-20","2016-05-24","2016-05-25","2016-05-26","2016-05-27","2016-05-30","2016-06-01","2016-06-02","2016-06-03","2016-06-06","2016-06-13","2016-06-14","2016-06-15","2016-06-16","2016-06-17","2016-06-23","2016-06-24","2016-06-27","2016-06-28","2016-06-29","2016-06-30","2016-07-01","2016-07-04","2016-07-05","2016-07-06","2016-07-07","2016-07-11","2016-07-13","2016-07-14","2016-07-15","2016-07-18","2016-07-20","2016-07-21","2016-07-22","2016-07-23","2016-07-25","2016-07-26","2016-07-27","2016-07-28","2016-07-29","2016-07-30","2016-08-01","2016-08-02","2016-08-03","2016-08-05","2016-08-06","2016-08-08","2016-08-09","2016-08-10","2016-08-11","2016-08-12","2016-08-15","2016-08-16","2016-08-17","2016-08-18","2016-08-19","2016-08-20","2016-08-22"]
},"yAxis":{"type":"value","z":0,"min":0,"max":100,"interval":20,"positon":"right","boundaryGap":false,"axisLine":{"show":true,"lineStyle":{"color":"#f2f2f2","width":1}},"axisTick":false,"splitLine":{"lineStyle":{"color":"#f2f2f2"}},"axisLabel":{"textStyle":{"color":"#ccc"}}},"dataZoom":[{"show":false},{"show":true,"z":0,"type":"slider","fillerColor":"rgba(230,230,230,.3)","dataBackground":{"areaStyle":{"color":"rgb(210,210,210)"}}}],"series":[{"type":"line","smooth":true,"symbol":"emptyCircle","itemStyle":{"normal":{"color":"rgb(255, 223, 190)"}},"z":0,"areaStyle":{"normal":{"color":"rgb(255, 242, 230)"}},"showAllSymbol":true,"data":
["61","57","62","65","65","67","65","68","68","65","67","69","66","67","66","70","67","72","73","73","71","69","72","73","72","74","77","75","74","74","68","70","69","70","70","72","74","71","71","70","72","74","76","72","76","73","67","60","59","64","64","66","66","61","59","59","57","61","63","61","65","65","65","66","70","60","62","66","66","66","70","64","66","68","69","71","67","69","71","68","69","68","69","67","69","65","65","64","63","69","66","67","66","66","63","62","68","66","65","70","70","71","70","58","66","68","67","62"]
}]}
require([
'echarts',
'echarts/chart/line',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/tooltip',
'echarts/component/dataZoom'
], function (echarts) {
var main = document.getElementById('main0');
if (!main) {
return;
}
var chart = echarts.init(main);
chart.setOption(option0);
setTimeout(() => {
chart.setOption(option1);
setTimeout(() => {
chart.setOption(option2);
}, 2000)
}, 2000)
})
</script>
<!-- ==================== -->
<!-- Test Case 2 -->
<script>
require([
'echarts',
'echarts/chart/line',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/tooltip',
'echarts/component/dataZoom'
], function (echarts) {
var main = document.getElementById('main1');
if (!main) {
return;
}
var chart = echarts.init(main);
var option = {
"grid": {
"left": 72,
"right": 77
},
"xAxis": {
"type": "category",
"data": ["2016-07-23","2016-08-22"]
},
"yAxis": {
"type": "value"
},
"series": [
{
"type": "line",
// step: true,
"areaStyle": {
"normal": {
"color": "rgb(255, 242, 230)"
}
},
step: true,
stack: 'a',
"showAllSymbol": true,
"data": ["69","62"]
},
{
"type": "line",
step: true,
"areaStyle": {
"normal": {
"color": "rgb(155, 242, 230)"
}
},
stack: 'a',
"showAllSymbol": true,
"data": ["19","12"]
}
]
};
var option1 = {
xAxis: {data: ["2016-05-24","2016-07-23","2016-08-22"]},
series: [{
data: ["66","67","62"]
}, {
data: ["26","27","22"]
}]
};
var option2 = {
xAxis: {data: ["2016-02-24","2016-05-24","2016-07-23","2016-08-22"]},
series: [
{data: ["61","57","62","65"]},
{data: ["31","37","32","35"]}
]
};
chart.setOption(option);
setTimeout(function () {
chart.setOption(option1);
setTimeout(function () {
chart.setOption(option2);
}, 2000)
}, 2000)
});
</script>
<!-- ==================== -->
<!-- Test Case 3 -->
<script>
require([
'echarts',
'echarts/chart/line',
// 'echarts/component/legend',
'echarts/component/grid',
'echarts/component/tooltip',
// 'zrender/vml/vml'
], function (echarts) {
var main = document.getElementById('main2');
if (!main) {
return;
}
var chart = echarts.init(main);
var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
var data4 = [];
xAxisData.push('类目' + -1);
data1.push('-');
data2.push('-');
data3.push('-');
data4.push('-');
for (var i = 0; i < 5; i++) {
xAxisData.push('类目' + i);
data1.push((-Math.random() - 0.2).toFixed(3));
data2.push((Math.random() + 0.3).toFixed(3));
data3.push((Math.random() + 0.2).toFixed(3));
data4.push((Math.random() + 0.2).toFixed(3));
}
xAxisData.push('类目' + i);
data1.push('-');
data2.push('-');
data3.push('-');
data4.push('-');
for (; i < 10; i++) {
xAxisData.push('类目' + i);
data1.push((-Math.random() - 0.2).toFixed(3));
data2.push((Math.random() + 0.3).toFixed(3));
data3.push((Math.random() + 0.2).toFixed(3));
data4.push((Math.random() + 0.2).toFixed(3));
}
xAxisData.push('类目' + i);
data1.push('-');
data2.push('-');
data3.push('-');
data4.push('-');
var itemStyle = {
normal: {
// borderColor: 'white',
// borderWidth: 3,
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowOffsetY: 5,
// shadowColor: 'rgba(0, 0, 0, 0.4)',
lineStyle: {
width: 2
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowOffsetY: 5,
// shadowColor: 'rgba(0, 0, 0, 0.4)'
},
areaStyle: {
}
}
};
chart.setOption({
legend: {
data: ['line', 'line2', 'line3']
},
tooltip: {
trigger: 'axis',
position: function (point) {
return [point[0], '10%'];
},
axisPointer: {
type: 'line'
}
},
xAxis: {
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
data: xAxisData,
boundaryGap: false,
// inverse: true,
splitArea: {
show: true
}
},
yAxis: {
},
series: [{
id: 'aaa',
name: 'line33333',
type: 'line',
stack: 'all',
symbolSize: 10,
data: data3,
itemStyle: itemStyle,
label: {
normal: {
show: true
}
},
connectNulls: true,
smooth: true
}]
});
setTimeout(function () {
chart.setOption({
series: [
{
id: 'aaa',
name: 'xxxxxxxxxxxxxxxx',
data: data4,
}
]
});
}, 1000);
})
</script>
</body>
</html>