| |
| <!-- |
| 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/facePrint.js"></script> |
| <script src="lib/testHelper.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; |
| background: #360; |
| text-align: center; |
| font-weight: bold; |
| color: #eee; |
| font-size: 14px; |
| margin: 0; |
| } |
| </style> |
| |
| |
| |
| <div class="chart" id="chart-1"></div> |
| <div class="chart" id="chart0"></div> |
| <div class="chart" id="chart1"></div> |
| <div class="chart" id="chart2"></div> |
| <div class="chart" id="chart3"></div> |
| <div class="chart" id="chart4"></div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| |
| require([ |
| 'data/rainfall.json.js', |
| 'echarts' |
| ], function (rainfallData, echarts) { |
| |
| var option = { |
| tooltip : { |
| trigger: 'axis' |
| }, |
| dataZoom: { |
| show: true, |
| realtime: true, |
| startValue: '2009-09-20 12:00', |
| end: 100 |
| }, |
| xAxis : [ |
| { |
| type : 'time', |
| // splitNumber: 20, |
| axisLabel: { |
| formatter: function (value) { |
| return echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', value); |
| } |
| } |
| } |
| ], |
| yAxis : [ |
| { |
| name: '流量(m^3/s)' |
| } |
| ], |
| series : [ |
| { |
| name: '流量', |
| type: 'line', |
| symbol: 'none', |
| itemStyle: {normal: {areaStyle: {type: 'default'}}}, |
| data: rainfallData.flow.map(function (val, idx) { |
| return [+(new Date(rainfallData.category[idx])), val]; |
| }) |
| } |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'chart-1', { |
| title: [ |
| 'The last x label should not be displayed (overlap).' |
| ], |
| option: option, |
| info: option.xAxis, |
| infoKey: 'xAxis' |
| }); |
| }) |
| |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| |
| require([ |
| 'data/rainfall.json.js', |
| 'echarts' |
| ], function (rainfallData, echarts) { |
| |
| var option = { |
| tooltip : { |
| trigger: 'axis' |
| }, |
| grid: { |
| bottom: 150 |
| }, |
| dataZoom: { |
| show: true, |
| realtime: true, |
| startValue: '2009-09-20 12:00', |
| end: 100 |
| }, |
| xAxis : [ |
| { |
| type : 'time', |
| // splitNumber: 20, |
| axisLabel: { |
| rotate: 45, |
| formatter: function (value) { |
| return echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', value); |
| } |
| } |
| } |
| ], |
| yAxis : [ |
| { |
| name: '流量(m^3/s)' |
| } |
| ], |
| series : [ |
| { |
| name: '流量', |
| type: 'line', |
| symbol: 'none', |
| itemStyle: {normal: {areaStyle: {type: 'default'}}}, |
| data: rainfallData.flow.map(function (val, idx) { |
| return [+(new Date(rainfallData.category[idx])), val]; |
| }) |
| } |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'chart0', { |
| title: [ |
| 'The last x label shoule be displayed (not overlap).' |
| ], |
| option: option, |
| info: option.xAxis, |
| infoKey: 'xAxis' |
| }); |
| }) |
| |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| |
| require([ |
| 'data/rainfall.json.js', |
| 'echarts' |
| ], function (rainfallData, echarts) { |
| |
| var option = { |
| tooltip : { |
| trigger: 'axis' |
| }, |
| dataZoom: { |
| show: true, |
| realtime: true, |
| startValue: '2009-09-20 12:00', |
| end: 100 |
| }, |
| xAxis : [ |
| { |
| type : 'time', |
| // splitNumber: 20, |
| axisLabel: { |
| showMaxLabel: true, |
| showMinLabel: true, |
| formatter: function (value) { |
| return echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', value); |
| } |
| } |
| } |
| ], |
| yAxis : [ |
| { |
| name: '流量(m^3/s)', |
| position: 'right', |
| axisLabel: { |
| inside: true, |
| showMaxLabel: false, |
| formatter: '{value}\n' |
| } |
| } |
| ], |
| series : [ |
| { |
| name: '流量', |
| type: 'line', |
| symbol: 'none', |
| itemStyle: {normal: {areaStyle: {type: 'default'}}}, |
| data: rainfallData.flow.map(function (val, idx) { |
| return [+(new Date(rainfallData.category[idx])), val]; |
| }) |
| } |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'chart1', { |
| title: [ |
| 'The last x label should be displayed. The top tick on y should not be displayed.' |
| ], |
| option: option, |
| info: { |
| yAxis: option.yAxis, |
| xAxis: option.xAxis |
| } |
| }); |
| }) |
| |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| |
| require([ |
| 'data/rainfall.json.js', |
| 'echarts' |
| ], function (rainfallData, echarts) { |
| |
| var option = { |
| tooltip: { |
| trigger: 'axis' |
| }, |
| dataZoom: { |
| show: true, |
| realtime: true, |
| // The `startValue` does not exist in the categories as it's splitted by '-' rather than '/' |
| // It will fallback to the first category |
| // The same to `endValue` / `end` / `start` |
| startValue: '2009-07-20 12:00', |
| // the `endValue` should work |
| endValue: '2009/8/20 12:00', |
| // start: 50, |
| // end: 60, |
| // end: 'aaaa' |
| }, |
| xAxis: { |
| axisTick: { |
| alignWithLabel: true |
| }, |
| axisLabel: { |
| showMaxLabel: true, |
| showMinLabel: true, |
| formatter: function (value) { |
| return echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', value); |
| } |
| }, |
| data: rainfallData.flow.map(function (val, idx) { |
| return rainfallData.category[idx]; |
| }) |
| }, |
| yAxis: { |
| name: '流量(m^3/s)', |
| axisLabel: { |
| inside: true, |
| showMaxLabel: false, |
| formatter: '{value}\n' |
| } |
| }, |
| series: [ |
| { |
| name: '流量', |
| type: 'line', |
| symbol: 'none', |
| itemStyle: {normal: {areaStyle: {type: 'default'}}}, |
| data: rainfallData.flow.map(function (val, idx) { |
| return val; |
| }) |
| } |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'chart2', { |
| title: [ |
| 'category xAxis:The min and max x label should be displayed.' |
| ], |
| option: option, |
| info: { |
| axisLabel: option.xAxis.axisLabel, |
| axisTick: option.xAxis.axisTick |
| }, |
| infoKey: 'xAxis' |
| }); |
| }) |
| |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| |
| require([ |
| 'data/rainfall.json.js', |
| 'echarts' |
| ], function (rainfallData, echarts) { |
| |
| var option = { |
| tooltip : { |
| trigger: 'axis', |
| axisPointer : { // 坐标轴指示器，坐标轴触发有效 |
| type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' |
| } |
| }, |
| legend: { |
| data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎'] |
| }, |
| grid: [{ |
| height: 80, |
| width: '40%', |
| containLabel: true |
| }, { |
| height: 80, |
| right: 10, |
| width: '40%', |
| containLabel: true |
| }], |
| xAxis: [{ |
| type: 'value' |
| }, { |
| type: 'value', |
| gridIndex: 1 |
| }], |
| yAxis: [{ |
| axisLabel: { |
| interval: 0, |
| textStyle: { |
| fontSize: 18 |
| } |
| }, |
| type: 'category', |
| data: ['周 A','周 B','周 C','周 D','周 E','周 F','周 G'] |
| }, { |
| gridIndex: 1, |
| axisLabel: { |
| interval: 0, |
| textStyle: { |
| fontSize: 18 |
| }, |
| showMinLabel: false, |
| showMaxLabel: false |
| }, |
| type: 'category', |
| data: ['周 A','周 B','周 C','周 D','周 E','周 F','周 G'] |
| }], |
| series: [{ |
| type: 'bar', |
| data: [320, 302, 301, 334, 390, 330, 320] |
| }, { |
| type: 'bar', |
| data: [325, 102, 201, 84, 190, 230, 120], |
| xAxisIndex: 1, |
| yAxisIndex: 1 |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'chart3', { |
| title: [ |
| 'category yAxis: all Label should be displayed.', |
| 'axisLabel.interval is 0, showMaxLabel/showMinLabel should be ignored.' |
| ], |
| option: option, |
| info: { |
| yAxis0: { |
| axisLabel: option.xAxis[0].axisLabel, |
| axisTick: option.xAxis[0].axisTick |
| }, |
| yAxis1: { |
| axisLabel: option.xAxis[1].axisLabel, |
| axisTick: option.xAxis[1].axisTick |
| } |
| }, |
| infoKey: 'xAxis' |
| }); |
| }) |
| |
| </script> |
| |
| |
| |
| |
| |
| |
| <script> |
| |
| require([ |
| 'echarts', |
| ], function (echarts /*, data */) { |
| |
| const _ctx = { |
| xAxis_axisTick_interval: { |
| text: 'xAxis.axisTick.interval:', |
| value: 'NOT_SET', |
| values: ['NOT_SET', 2, 0, 1] |
| }, |
| xAxis_axisLabel_interval: { |
| text: 'xAxis.axisLabel.interval:', |
| value: 'NOT_SET', |
| values: [ |
| 'NOT_SET', 2, 0, 1, |
| function (val) { |
| return !(val % 6); |
| } |
| ] |
| }, |
| br0: {}, |
| dataZoomOrMinMax: { |
| text: 'use:', |
| value: 'use_xAxis_min_max', |
| values: ['use_xAxis_min_max', 'use_dataZoom'], |
| }, |
| showMinMaxLabel: { |
| text: 'xAxis.axisLabel.showMinLabel/showMaxLabel:', |
| value: 'NOT_SET', |
| values: ['NOT_SET', true, false], |
| }, |
| }; |
| |
| function createOption() { |
| var xAxisData = []; |
| var data1 = []; |
| var data2 = []; |
| var data3 = []; |
| var bigTooltipBound = 10; |
| |
| for (var i = 0; i < 50; i++) { |
| xAxisData.push('Some' + i); |
| data1.push(+(Math.random() + 0.5).toFixed(3)); |
| data2.push(+(Math.random() + 0.5).toFixed(3)); |
| data3.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| |
| function getSymbolSize(value, param) { |
| if (param.dataIndex <= bigTooltipBound) { |
| return 30; |
| } |
| return 10; |
| } |
| |
| var itemStyle = { |
| normal: { |
| borderColor: 'white', |
| borderWidth: 3, |
| lineStyle: { |
| width: 1 |
| } |
| } |
| }; |
| |
| var xAxisConfig = { |
| axisLabel: {}, |
| axisTick: {} |
| }; |
| if (_ctx.xAxis_axisLabel_interval.value !== 'NOT_SET') { |
| xAxisConfig.axisLabel.interval = _ctx.xAxis_axisLabel_interval.value; |
| } |
| if (_ctx.xAxis_axisTick_interval.value !== 'NOT_SET') { |
| xAxisConfig.axisTick.interval = _ctx.xAxis_axisTick_interval.value; |
| } |
| if (_ctx.showMinMaxLabel.value !== 'NOT_SET') { |
| xAxisConfig.axisLabel.showMinLabel = _ctx.showMinMaxLabel.value; |
| xAxisConfig.axisLabel.showMaxLabel = _ctx.showMinMaxLabel.value; |
| } |
| |
| var dataZoomOption = null; |
| var minMaxConfig = {}; |
| if (_ctx.dataZoomOrMinMax.value === 'use_dataZoom') { |
| dataZoomOption = [{ |
| type: 'inside', |
| startValue: 'Some5', |
| endValue: 'Some15' |
| }, { |
| type: 'slider', |
| bottom: 40, |
| startValue: 'Some5', |
| endValue: 'Some15' |
| }]; |
| } |
| else if (_ctx.dataZoomOrMinMax.value === 'use_xAxis_min_max') { |
| minMaxConfig = { |
| min: 5, |
| max: 15, |
| }; |
| } |
| |
| return { |
| backgroundColor: '#eee', |
| legend: { |
| data: ['line', 'line2', 'line3'], |
| itemWidth: 50, |
| itemHeight: 40, |
| top: 0 |
| }, |
| visualMap: null, // For testing null exists in option. |
| tooltip: { |
| trigger: 'axis', |
| // set enterable as false to check coord of event triggered by tooltip. |
| enterable: false, |
| axisPointer: { |
| type: 'shadow' |
| }, |
| }, |
| grid: { |
| left: 50, |
| // Intentional test for this case: |
| // This width can hide xAxis category labels alternately, |
| // but show min max xAxis label. |
| width: 530, |
| bottom: 100 |
| }, |
| xAxis: { |
| data: xAxisData, |
| boundaryGap: false, |
| splitArea: { |
| show: true |
| }, |
| splitLine: { |
| show: true |
| }, |
| ...minMaxConfig, |
| ...xAxisConfig, |
| }, |
| yAxis: { |
| splitArea: { |
| show: true |
| } |
| }, |
| dataZoom: dataZoomOption, |
| series: [{ |
| name: 'line', |
| type: 'line', |
| stack: 'all', |
| symbol: 'circle', |
| symbolSize: getSymbolSize, |
| data: data1, |
| itemStyle: itemStyle, |
| step: 'end' |
| }, { |
| name: 'line2', |
| type: 'line', |
| stack: 'all', |
| symbol: 'circle', |
| symbolSize: getSymbolSize, |
| data: data2, |
| itemStyle: itemStyle, |
| step: 'end' |
| }, { |
| name: 'line3', |
| type: 'line', |
| stack: 'all', |
| symbol: 'triangle', |
| symbolSize: getSymbolSize, |
| data: data3, |
| itemStyle: itemStyle, |
| step: 'end' |
| }] |
| }; |
| } |
| |
| function updateChart() { |
| chart.setOption(createOption(), {notMerge: true}); |
| } |
| |
| var chart = testHelper.create(echarts, 'chart4', { |
| title: [ |
| 'Axis category with axisLabel.interval.', |
| 'start/end tick/label should not be displayed by default.', |
| ], |
| option: createOption(), |
| inputsStyle: 'compact', |
| inputs: testHelper.createInputsSimply(_ctx, updateChart) |
| |
| }); // End of `testHelper.create` |
| |
| }); // End of `require` |
| |
| |
| </script> |
| |
| |
| |
| </body> |
| </html> |
