| |
| <!-- |
| 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/esl.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' |
| // '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/grid', |
| // 'echarts/component/tooltip' |
| ], 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> |
