Spaces:
Running
Running
| <!-- | |
| 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> | |