| <!DOCTYPE html> | |
| <!-- | |
| 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> | |
| <script src="lib/jquery.min.js"></script> | |
| <script src="lib/facePrint.js"></script> | |
| <script src="lib/testHelper.js"></script> | |
| <script src="lib/draggable.js"></script> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="stylesheet" href="lib/reset.css"> | |
| </head> | |
| <body> | |
| <style> | |
| h1 { | |
| line-height: 60px; | |
| height: 60px; | |
| background: #a60; | |
| text-align: center; | |
| font-weight: bold; | |
| color: #eee; | |
| font-size: 14px; | |
| } | |
| .chart { | |
| height: 500px; | |
| } | |
| </style> | |
| <div class="chart" id="main0"></div> | |
| <div class="chart" id="main1"></div> | |
| <div class="chart" id="main2"></div> | |
| <div class="chart" id="main3"></div> | |
| <div class="chart" id="main4"></div> | |
| <div class="chart" id="main5"></div> | |
| <div class="chart" id="main6"></div> | |
| <div class="chart" id="main6.5"></div> | |
| <div class="chart" id="main7"></div> | |
| <div class="chart" id="main8"></div> | |
| <div class="chart" id="main9"></div> | |
| <div class="chart" id="main10"></div> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var xAxisData = []; | |
| var data1 = []; | |
| var data2 = []; | |
| var data3 = []; | |
| var count = 100; | |
| for (var i = 0; i < count; i++) { | |
| if (i === 14 || i === 20) { | |
| xAxisData.push({ | |
| value: '类目' + i, | |
| textStyle: { | |
| color: 'red' | |
| } | |
| }); | |
| } else { | |
| xAxisData.push('类目' + i); | |
| } | |
| if (i < 5 && i > 1) { | |
| data1.push(0); | |
| } | |
| else { | |
| data1.push(+(Math.random() + 0.5).toFixed(3)); | |
| } | |
| data2.push(+(Math.random() + 0.5).toFixed(3)); | |
| data3.push(+(Math.random() + 0.5).toFixed(3)); | |
| } | |
| var itemStyle = { | |
| normal: { | |
| borderColor: 'white', | |
| borderWidth: 3, | |
| lineStyle: { | |
| width: 1 | |
| } | |
| } | |
| }; | |
| // var rawData = [[0.877,1.384,0,0,0,1.422,1.363,0.867,0.782,1.025,0.819,0.638,1.192,0.56,1.17,1.056,0.804,0.657,1.157,0.906,1.462,0.856,1.384,0.978,0.766,0.683,1.383,0.65,1.343,1.303,1.298,0.812,0.665,1.182,0.528,0.613,1.101,0.959,0.997,1.381,1.172,1.01,1.23,0.596,1.256,1.406,1.172,0.85,1.194,1.313,1.142,0.985,1.059,1.07,1.205,1.359,0.93,0.514,1.197,1.259,1.225,1.371,0.825,0.967,0.569,1.432,0.892,1.36,0.644,1.096,1.006,0.613,0.549,1.263,1.203,0.556,1.044,1.338,0.8,1.137,1.164,1.44,0.995,0.989,1.098,0.563,0.768,0.584,0.794,1.33,0.687,0.89,1.317,1.466,1.01,0.886,0.964,1.244,1.421,0.922],[1.369,1.092,1.446,1.472,0.873,1.093,1.136,1.057,0.832,0.633,1.054,1.169,0.727,0.674,1.361,0.842,0.762,0.621,0.964,0.87,1.425,0.543,0.877,0.779,0.568,1.352,1.065,1.381,0.938,0.805,0.686,0.994,1.485,0.915,0.504,1.141,1.167,1.101,1.423,0.789,0.942,0.863,1.02,1.443,0.732,1.197,0.993,0.738,0.923,1.355,0.796,0.707,0.729,1.27,1.034,0.704,1.375,1.377,0.953,0.555,1.211,1.37,1.399,1.183,0.591,0.803,0.969,0.866,1.086,1.35,1.378,0.834,1.048,1.084,1.267,0.965,1.064,0.954,1.39,0.564,0.742,1.033,1.293,0.74,0.709,0.962,0.863,1.455,0.894,0.876,0.827,0.662,1.33,0.857,0.71,1.423,1.131,1.224,0.725,1.446],[0.895,1.487,0.63,1.245,1.184,0.738,0.905,1.299,1.16,0.904,0.902,1.231,0.919,1.067,1.319,0.939,1.424,1.348,0.537,0.519,0.542,1.091,1.351,1.337,0.674,1.112,1.218,1.317,0.62,0.686,0.683,1.273,1.096,1.324,1.448,1.157,0.8,0.878,0.83,1.069,1.261,0.968,1.043,0.55,0.73,0.886,0.8,0.943,0.597,0.93,0.794,1.43,0.941,1.376,0.647,0.848,1.273,0.853,0.585,0.899,0.649,1.217,1.097,1.273,1.165,0.648,0.622,1.111,0.626,0.75,1.477,1.13,0.6,0.855,1.463,1.414,1.487,0.992,0.948,1.333,0.791,0.654,0.511,1.471,0.626,1.286,0.547,1.082,1.195,1.29,0.794,1.294,1.136,0.807,0.647,1.415,0.674,0.869,1.437,0.711]]; | |
| // data1 = rawData[0]; | |
| // data2 = rawData[1]; | |
| // data3 = rawData[2]; | |
| var option = { | |
| legend: { | |
| data: ['line', 'line2', 'line3'] | |
| }, | |
| visualMap: null, // 用于测试 option 中含有null的情况。 | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'line' | |
| } | |
| }, | |
| xAxis: { | |
| // data: ['类目1', '类目2', '类目3', '类目4', '类目5',] | |
| data: xAxisData, | |
| boundaryGap: false, | |
| // inverse: true, | |
| splitArea: { | |
| show: false | |
| }, | |
| splitLine: { | |
| show: false | |
| }, | |
| axisLabel: { | |
| // showMaxLabel: true, | |
| // showMinLabel: true | |
| } | |
| }, | |
| grid: { | |
| left: '10%', | |
| right: '10%' | |
| }, | |
| yAxis: { | |
| axisLabel: { | |
| textStyle: { | |
| color: 'red' | |
| } | |
| }, | |
| splitArea: { | |
| show: true | |
| } | |
| }, | |
| dataZoom: [{ | |
| type: 'inside', | |
| // start: 10, | |
| // end: 12 | |
| startValue: 11, | |
| endValue: 85 | |
| }, { | |
| type: 'slider', | |
| // start: 10, | |
| // end: 12 | |
| startValue: 11, | |
| endValue: 85 | |
| }], | |
| // animationDurationUpdate: 2000, | |
| // animation: false, | |
| series: [ | |
| null, // 用于测试 option 中含有null的情况。 | |
| { | |
| name: 'line', | |
| type: 'line', | |
| stack: 'all', | |
| symbol: 'path://M164,210.677v33.47l154.656,66.356L468,243.681v-33.004H164L164,210.677z M164,282.255L164,282.255v134.76h304V282.061l-149.012,66.615L164,282.255L164,282.255z', | |
| symbolKeepAspect: true, | |
| symbolSize: 40, | |
| data: data1, | |
| itemStyle: itemStyle, | |
| label: { | |
| normal: { | |
| show: true, | |
| fontSize: 12 | |
| } | |
| }, | |
| lineStyle: { | |
| normal: { | |
| shadowBlur: 4, | |
| shadowOffsetX: 3, | |
| shadowOffsetY: 3 | |
| } | |
| }, | |
| step: 'end' | |
| }, | |
| { | |
| label: { | |
| normal: { | |
| show: true, | |
| position: 'outside' | |
| } | |
| }, | |
| name: 'line2', | |
| type: 'line', | |
| stack: 'all', | |
| symbol: 'circle', | |
| symbolSize: 10, | |
| data: data2, | |
| itemStyle: itemStyle, | |
| step: 'end' | |
| }, | |
| { | |
| name: 'line3', | |
| type: 'line', | |
| stack: 'all', | |
| symbol: 'triangle', | |
| symbolSize: 10, | |
| data: data3, | |
| itemStyle: itemStyle, | |
| step: 'end' | |
| } | |
| ] | |
| }; | |
| chart = myChart = testHelper.create(echarts, 'main0', { | |
| title: [ | |
| '(0) Move the slider zoom, check the tick and symbol animation stable (not change ticks selection)', | |
| '(1) Adjust (zoom) the slider zoom to the extent of just change the tick interval.', | |
| '(2) Move the slider zoom, CHECK whether the interval is stable (no jitter).' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var xAxisData = []; | |
| var data1 = []; | |
| var data2 = []; | |
| var data3 = []; | |
| for (var i = 0; i < 100; i++) { | |
| xAxisData.push('类目' + i); | |
| data1.push((Math.random() * 5).toFixed(2)); | |
| data2.push(-Math.random().toFixed(2)); | |
| data3.push((Math.random() + 0.5).toFixed(2)); | |
| } | |
| var itemStyle = { | |
| normal: { | |
| barBorderRadius: 5, | |
| label: { | |
| show: true, | |
| position: 'outside' | |
| } | |
| }, | |
| emphasis: { | |
| label: { | |
| position: 'outside' | |
| }, | |
| barBorderColor: '#fff', | |
| barBorderWidth: 1, | |
| shadowBlur: 10, | |
| shadowOffsetX: 0, | |
| shadowOffsetY: 0, | |
| shadowColor: 'rgba(0,0,0,0.5)' | |
| } | |
| }; | |
| var option = { | |
| backgroundColor: '#eef', | |
| legend: { | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'shadow' | |
| } | |
| }, | |
| xAxis: { | |
| data: xAxisData, | |
| name: '横轴', | |
| silent: false, | |
| inverse: true, | |
| axisTick: { | |
| alignWithLabel: true | |
| }, | |
| // axisLabel: { | |
| // show: false | |
| // }, | |
| // axisTick: { | |
| // show: false | |
| // }, | |
| axisLine: { | |
| onZero: true, | |
| // lineStyle: { | |
| // width: 40 | |
| // } | |
| }, | |
| splitLine: { | |
| show: true, | |
| lineStyle: { | |
| color: 'green' | |
| } | |
| }, | |
| splitArea: { | |
| show: true | |
| } | |
| }, | |
| yAxis: { | |
| inverse: true, | |
| // axisLabel: { | |
| // show: false | |
| // }, | |
| axisTick: { | |
| show: false | |
| }, | |
| // splitLine: { | |
| // show: false | |
| // }, | |
| splitArea: { | |
| show: false | |
| } | |
| }, | |
| dataZoom: [{ | |
| type: 'inside' | |
| }, {}], | |
| series: [{ | |
| name: 'bar', | |
| type: 'bar', | |
| stack: 'one', | |
| itemStyle: itemStyle, | |
| cursor: 'move', | |
| data: data1 | |
| }, { | |
| name: 'bar2', | |
| type: 'bar', | |
| stack: 'one', | |
| itemStyle: itemStyle, | |
| cursor: 'default', | |
| data: data2 | |
| }, { | |
| name: 'bar3', | |
| type: 'bar', | |
| stack: 'two', | |
| itemStyle: itemStyle, | |
| data: data3 | |
| }] | |
| }; | |
| chart = myChart = testHelper.create(echarts, 'main1', { | |
| title: [ | |
| '(0) Zoom and check the splitLine(green) and splitArea when axis interval exists', | |
| '(1) Check not split a single data item when odd category tick interval' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var xAxisData = []; | |
| var data1 = []; | |
| var data2 = []; | |
| var data3 = []; | |
| for (var i = 0; i < 100; i++) { | |
| xAxisData.push('类目' + i); | |
| data1.push((Math.random() * 5).toFixed(2)); | |
| data2.push(-Math.random().toFixed(2)); | |
| data3.push((Math.random() + 0.5).toFixed(2)); | |
| } | |
| var itemStyle = { | |
| normal: { | |
| barBorderRadius: 5, | |
| label: { | |
| show: true, | |
| position: 'outside' | |
| } | |
| }, | |
| emphasis: { | |
| label: { | |
| position: 'outside' | |
| }, | |
| barBorderColor: '#fff', | |
| barBorderWidth: 1, | |
| shadowBlur: 10, | |
| shadowOffsetX: 0, | |
| shadowOffsetY: 0, | |
| shadowColor: 'rgba(0,0,0,0.5)' | |
| } | |
| }; | |
| var option = { | |
| backgroundColor: '#eef', | |
| legend: { | |
| }, | |
| tooltip: { | |
| }, | |
| xAxis: { | |
| data: xAxisData, | |
| name: '横轴', | |
| silent: false, | |
| axisTick: { | |
| alignWithLabel: true | |
| }, | |
| // axisLabel: { | |
| // show: false | |
| // }, | |
| // axisTick: { | |
| // show: false | |
| // }, | |
| axisLine: { | |
| onZero: true | |
| }, | |
| splitLine: { | |
| show: true, | |
| lineStyle: { | |
| color: 'green' | |
| } | |
| }, | |
| splitArea: { | |
| show: true | |
| } | |
| }, | |
| yAxis: { | |
| inverse: true, | |
| // axisLabel: { | |
| // show: false | |
| // }, | |
| axisTick: { | |
| show: false | |
| }, | |
| // splitLine: { | |
| // show: false | |
| // }, | |
| splitArea: { | |
| show: false | |
| } | |
| }, | |
| animationDurationUpdate: 800, | |
| dataZoom: [{ | |
| type: 'inside', | |
| startValue: 17, | |
| endValue: 24, | |
| zoomLock: true | |
| }, { | |
| startValue: 17, | |
| endValue: 24, | |
| zoomLock: true | |
| }], | |
| series: [{ | |
| name: 'bar', | |
| type: 'bar', | |
| stack: 'one', | |
| itemStyle: itemStyle, | |
| cursor: 'move', | |
| data: data1 | |
| }, { | |
| name: 'bar2', | |
| type: 'bar', | |
| stack: 'one', | |
| itemStyle: itemStyle, | |
| cursor: 'default', | |
| data: data2 | |
| }, { | |
| name: 'bar3', | |
| type: 'bar', | |
| stack: 'two', | |
| itemStyle: itemStyle, | |
| data: data3 | |
| }] | |
| }; | |
| chart = myChart = testHelper.create(echarts, 'main2', { | |
| title: [ | |
| '(0) Move and check splitArea and splitLine(green) animation (zoom locked)' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var xAxisData = []; | |
| var data1 = []; | |
| var data3 = []; | |
| for (var i = 0; i < 100; i++) { | |
| xAxisData.push('类目' + i); | |
| data1.push((Math.random() * 5).toFixed(2)); | |
| data3.push((Math.random() + 0.5).toFixed(2)); | |
| } | |
| var itemStyle = { | |
| normal: { | |
| barBorderRadius: 5, | |
| label: { | |
| show: true, | |
| position: 'outside' | |
| } | |
| }, | |
| emphasis: { | |
| label: { | |
| position: 'outside' | |
| }, | |
| barBorderColor: '#fff', | |
| barBorderWidth: 1, | |
| shadowBlur: 10, | |
| shadowOffsetX: 0, | |
| shadowOffsetY: 0, | |
| shadowColor: 'rgba(0,0,0,0.5)' | |
| } | |
| }; | |
| var option = { | |
| backgroundColor: '#eef', | |
| legend: { | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'shadow' | |
| } | |
| }, | |
| xAxis: { | |
| data: xAxisData, | |
| name: '横轴', | |
| silent: false, | |
| axisLine: { | |
| onZero: true | |
| }, | |
| splitArea: { | |
| show: true | |
| } | |
| }, | |
| yAxis: { | |
| axisTick: { | |
| show: false | |
| }, | |
| splitArea: { | |
| show: false | |
| } | |
| }, | |
| dataZoom: [{ | |
| type: 'inside', | |
| startValue: 17, | |
| endValue: 24, | |
| zoomLock: true | |
| }, { | |
| startValue: 17, | |
| endValue: 24, | |
| zoomLock: true | |
| }], | |
| series: [{ | |
| name: 'bar', | |
| type: 'bar', | |
| stack: 'one', | |
| itemStyle: itemStyle, | |
| cursor: 'move', | |
| data: data1 | |
| }, { | |
| name: 'bar3', | |
| type: 'bar', | |
| stack: 'two', | |
| itemStyle: itemStyle, | |
| data: data3 | |
| }] | |
| }; | |
| chart = myChart = testHelper.create(echarts, 'main3', { | |
| title: [ | |
| 'alignWithTick: default (false), and boundaryGap: default (true)' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var xAxisData = []; | |
| var data1 = []; | |
| var data3 = []; | |
| for (var i = 0; i < 100; i++) { | |
| xAxisData.push('c' + i); | |
| data1.push((Math.random() * 5).toFixed(2)); | |
| data3.push((Math.random() + 0.5).toFixed(2)); | |
| } | |
| var option = { | |
| legend: { | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'shadow' | |
| } | |
| }, | |
| xAxis: { | |
| data: xAxisData, | |
| axisTick: { | |
| interval: 4, | |
| alignWithLabel: true | |
| }, | |
| axisLabel: { | |
| }, | |
| splitArea: { | |
| show: true | |
| } | |
| }, | |
| yAxis: { | |
| axisTick: { | |
| show: false | |
| }, | |
| splitArea: { | |
| show: false | |
| } | |
| }, | |
| dataZoom: [{ | |
| type: 'inside', | |
| startValue: 17, | |
| endValue: 24 | |
| }, { | |
| startValue: 17, | |
| endValue: 24 | |
| }], | |
| series: [{ | |
| name: 'bar', | |
| type: 'bar', | |
| stack: 'one', | |
| cursor: 'move', | |
| data: data1 | |
| }, { | |
| name: 'bar3', | |
| type: 'bar', | |
| stack: 'two', | |
| data: data3 | |
| }] | |
| }; | |
| chart = myChart = testHelper.create(echarts, 'main4', { | |
| title: [ | |
| 'axisTick.interval is different from axisLabel.interval' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var xAxisData = []; | |
| var data1 = []; | |
| var data3 = []; | |
| for (var i = 0; i < 100; i++) { | |
| xAxisData.push('c' + i); | |
| data1.push((Math.random() * 5).toFixed(2)); | |
| data3.push((Math.random() + 0.5).toFixed(2)); | |
| } | |
| var option = { | |
| legend: { | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'shadow' | |
| } | |
| }, | |
| xAxis: [{ | |
| data: xAxisData, | |
| name: 'axisLabel.interval is function', | |
| nameLocation: 'middle', | |
| nameGap: 20, | |
| axisTick: { | |
| alignWithLabel: true | |
| }, | |
| axisLabel: { | |
| interval: function (categoryIdx, categoryValue) { | |
| return categoryIdx % 5 === 0; | |
| } | |
| }, | |
| splitArea: { | |
| show: true | |
| } | |
| }, { | |
| data: xAxisData, | |
| name: 'axisTick.interval is function', | |
| nameLocation: 'middle', | |
| nameGap: 20, | |
| gridIndex: 1, | |
| axisTick: { | |
| interval: function (categoryIdx, categoryValue) { | |
| return categoryIdx % 5 === 0; | |
| }, | |
| alignWithLabel: true | |
| }, | |
| axisLabel: { | |
| }, | |
| splitArea: { | |
| show: true | |
| } | |
| }], | |
| yAxis: [{ | |
| axisTick: { | |
| show: false | |
| }, | |
| splitArea: { | |
| show: false | |
| } | |
| }, { | |
| gridIndex: 1, | |
| axisTick: { | |
| show: false | |
| }, | |
| splitArea: { | |
| show: false | |
| } | |
| }], | |
| grid: [{ | |
| bottom: '60%' | |
| }, { | |
| top: '52%', | |
| bottom: 80 | |
| }], | |
| dataZoom: [{ | |
| type: 'inside', | |
| xAxisIndex: [0, 1], | |
| startValue: 17, | |
| endValue: 24 | |
| }, { | |
| xAxisIndex: [0, 1], | |
| startValue: 17, | |
| endValue: 24 | |
| }], | |
| series: [{ | |
| name: 'bar', | |
| type: 'bar', | |
| stack: 'one', | |
| cursor: 'move', | |
| data: data1 | |
| }, { | |
| name: 'bar3', | |
| type: 'bar', | |
| stack: 'two', | |
| data: data3 | |
| }, { | |
| name: 'bar', | |
| type: 'bar', | |
| stack: 'one1', | |
| cursor: 'move', | |
| xAxisIndex: 1, | |
| yAxisIndex: 1, | |
| data: data1 | |
| }, { | |
| name: 'bar3', | |
| type: 'bar', | |
| stack: 'two1', | |
| xAxisIndex: 1, | |
| yAxisIndex: 1, | |
| data: data3 | |
| }] | |
| }; | |
| chart = myChart = testHelper.create(echarts, 'main5', { | |
| title: [ | |
| 'axisLabel.interval and axisTick.interval are function' | |
| ], | |
| option: option, | |
| info: {xAxis: option.xAxis} | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var xAxisData = []; | |
| var data1 = []; | |
| var data3 = []; | |
| for (var i = 0; i < 100; i++) { | |
| xAxisData.push('c' + i); | |
| data1.push((Math.random() * 5).toFixed(2)); | |
| data3.push((Math.random() + 0.5).toFixed(2)); | |
| } | |
| var option = { | |
| legend: { | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'shadow' | |
| } | |
| }, | |
| xAxis: { | |
| data: xAxisData, | |
| axisTick: { | |
| alignWithLabel: true | |
| }, | |
| axisLabel: { | |
| show: false | |
| }, | |
| splitArea: { | |
| show: true | |
| } | |
| }, | |
| yAxis: { | |
| axisLabel: { | |
| show: false | |
| }, | |
| splitArea: { | |
| show: false | |
| } | |
| }, | |
| dataZoom: [{ | |
| type: 'inside', | |
| startValue: 17, | |
| endValue: 24 | |
| }, { | |
| startValue: 17, | |
| endValue: 24 | |
| }], | |
| series: [{ | |
| name: 'bar', | |
| type: 'bar', | |
| stack: 'one', | |
| cursor: 'move', | |
| data: data1 | |
| }, { | |
| name: 'bar3', | |
| type: 'bar', | |
| stack: 'two', | |
| data: data3 | |
| }] | |
| }; | |
| chart = myChart = testHelper.create(echarts, 'main6', { | |
| title: [ | |
| 'Only axisTick show, zoom and check axis tick.' | |
| ], | |
| option: option, | |
| info: {xAxis: option.xAxis} | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var xAxisData = []; | |
| var data1 = []; | |
| var data3 = []; | |
| for (var i = 0; i < 100; i++) { | |
| xAxisData.push('c' + i); | |
| data1.push((Math.random() * 5).toFixed(2)); | |
| data3.push((Math.random() + 0.5).toFixed(2)); | |
| } | |
| var option = { | |
| legend: { | |
| }, | |
| tooltip: { | |
| trigger: 'axis' | |
| }, | |
| dataZoom: [{ | |
| type: 'inside', | |
| xAxisIndex: 0, | |
| startValue: 17, | |
| endValue: 84 | |
| }, { | |
| type: 'inside', | |
| xAxisIndex: 1, | |
| startValue: 17, | |
| endValue: 84 | |
| }, { | |
| xAxisIndex: [0, 1], | |
| startValue: 17, | |
| endValue: 84 | |
| }], | |
| xAxis: [{ | |
| data: xAxisData, | |
| // axisTick: { | |
| // alignWithLabel: true | |
| // }, | |
| axisLabel: { | |
| show: false | |
| }, | |
| splitArea: { | |
| show: true | |
| }, | |
| splitLine: { | |
| show: true | |
| } | |
| }, { | |
| data: xAxisData, | |
| gridIndex: 1, | |
| splitArea: { | |
| show: true | |
| }, | |
| splitLine: { | |
| show: true | |
| } | |
| }], | |
| yAxis: [{ | |
| }, { | |
| gridIndex: 1, | |
| axisLabel: { | |
| showMaxLabel: false | |
| } | |
| }], | |
| grid: [{ | |
| bottom: '50%' | |
| }, { | |
| top: '50%' | |
| }], | |
| series: [{ | |
| name: 'bar', | |
| type: 'line', | |
| stack: 'one', | |
| cursor: 'move', | |
| data: data1 | |
| }, { | |
| name: 'bar3', | |
| type: 'line', | |
| stack: 'two', | |
| xAxisIndex: 1, | |
| yAxisIndex: 1, | |
| data: data3 | |
| }] | |
| }; | |
| chart = myChart = testHelper.create(echarts, 'main6.5', { | |
| title: [ | |
| 'The first grid has no label, the second grid has label.', | |
| 'splitLine and axisTick should be the same between the two grids.' | |
| ], | |
| option: option, | |
| info: {xAxis: option.xAxis} | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var xAxisData = []; | |
| var data1 = []; | |
| var data3 = []; | |
| for (var i = 0; i < 100; i++) { | |
| xAxisData.push('c' + i); | |
| data1.push((Math.random() * 5).toFixed(2)); | |
| data3.push((Math.random() + 0.5).toFixed(2)); | |
| } | |
| var option = { | |
| legend: { | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'shadow' | |
| } | |
| }, | |
| xAxis: { | |
| type: 'category', | |
| axisTick: { | |
| alignWithLabel: true | |
| }, | |
| axisLabel: { | |
| show: false | |
| }, | |
| splitArea: { | |
| show: true | |
| }, | |
| min: -300, | |
| max: 333333 | |
| }, | |
| yAxis: { | |
| axisLabel: { | |
| show: false | |
| }, | |
| splitArea: { | |
| show: false | |
| } | |
| }, | |
| dataZoom: [{ | |
| type: 'inside' | |
| }, { | |
| }], | |
| series: [{ | |
| name: 'bar', | |
| type: 'bar', | |
| stack: 'one', | |
| cursor: 'move' | |
| }] | |
| }; | |
| chart = myChart = testHelper.create(echarts, 'main7', { | |
| title: [ | |
| 'No data but has xAxis.min and xAxis.max, should no ticks and labels.', | |
| 'label.show: false, should no dead loop.' | |
| ], | |
| option: option, | |
| info: {xAxis: option.xAxis} | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var xAxisData = []; | |
| var data1 = []; | |
| var data3 = []; | |
| for (var i = 0; i < 100; i++) { | |
| xAxisData.push('c' + i); | |
| data1.push((Math.random() * 5).toFixed(2)); | |
| data3.push((Math.random() + 0.5).toFixed(2)); | |
| } | |
| var option = { | |
| legend: { | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'shadow' | |
| } | |
| }, | |
| xAxis: { | |
| type: 'category', | |
| data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], | |
| splitArea: { | |
| interval: 3, | |
| show: true, | |
| areaStyle: { | |
| color: ['blue', 'red'] | |
| } | |
| } | |
| }, | |
| yAxis: { | |
| axisLabel: { | |
| show: false | |
| }, | |
| splitArea: { | |
| show: false | |
| } | |
| }, | |
| dataZoom: [{ | |
| type: 'inside' | |
| }, { | |
| }], | |
| series: [] | |
| }; | |
| chart = myChart = testHelper.create(echarts, 'main8', { | |
| title: [ | |
| 'Check splitArea correct for indivisible interval.', | |
| 'Move left handle of the dataZoom and check splitArea correct' | |
| ], | |
| option: option, | |
| info: {xAxis: option.xAxis} | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var option = { | |
| legend: { | |
| }, | |
| tooltip: { | |
| trigger: 'axis' | |
| }, | |
| dataZoom: [{ | |
| type: 'inside', | |
| xAxisIndex: 0 | |
| }, { | |
| }], | |
| grid: { | |
| top: 10, | |
| left: 100 | |
| }, | |
| xAxis: [{ | |
| type: 'category', | |
| splitArea: { | |
| show: true | |
| }, | |
| splitLine: { | |
| show: true | |
| } | |
| }], | |
| yAxis: [{ | |
| type: 'category', | |
| axisLabel: { | |
| formatter: 'GOOD {value}', | |
| fontSize: 20 | |
| } | |
| }, { | |
| axisLabel: { | |
| showMaxLabel: false | |
| } | |
| }], | |
| series: [{ | |
| type: 'scatter', | |
| data: [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5]] | |
| }] | |
| }; | |
| chart = myChart = testHelper.create(echarts, 'main9', { | |
| title: [ | |
| 'Drag to resize the yAxis util labels changes, and then drag back.', | |
| 'Labels of yAxis should be able to back too the original state.' | |
| ], | |
| width: 300, | |
| height: 300, | |
| option: option, | |
| draggable: true | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var xAxisData = []; | |
| var data1 = []; | |
| for (var i = 0; i < 100; i++) { | |
| xAxisData.push('c' + i); | |
| data1.push((Math.random() * 5).toFixed(2)); | |
| } | |
| var option = { | |
| legend: { | |
| }, | |
| tooltip: { | |
| trigger: 'axis' | |
| }, | |
| dataZoom: [{ | |
| type: 'inside', | |
| xAxisIndex: 0, | |
| start: 14.63022259346915, | |
| end: 77.06506102371338 | |
| }, { | |
| start: 14.63022259346915, | |
| end: 77.06506102371338 | |
| }], | |
| xAxis: [{ | |
| data: xAxisData, | |
| splitArea: { | |
| show: true | |
| }, | |
| splitLine: { | |
| show: true | |
| } | |
| }], | |
| yAxis: [{ | |
| }], | |
| series: [{ | |
| name: 'bar', | |
| type: 'line', | |
| stack: 'one', | |
| cursor: 'move', | |
| data: data1 | |
| }] | |
| }; | |
| chart = myChart = testHelper.create(echarts, 'main10', { | |
| title: [ | |
| 'The dataZoom window range is at the critical value of changing axis interval from 2 to 3.', | |
| 'Move the dataZoom bar, the **xAxis labels should be stable**.', | |
| 'That is, xAxis labels should not be sometimes [c21, c24, c27] sometimes [c20, c24, c28]' | |
| ], | |
| option: option, | |
| // Should be fixed this width to make the dataZoom window range at the critical value. | |
| width: 653, | |
| height: 300, | |
| autoResize: false | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |