| <!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/esl.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> |
