| |
| <!-- |
| 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> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <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> |
| |
| |
| |
| |
| </body> |
| </html> |
