| <!-- | |
| 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"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <script src="lib/simpleRequire.js"></script> | |
| <script src="lib/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'], 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'], 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'], 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> |