| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="lib/esl.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> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| |
| require([ |
| 'data/rainfall.json', |
| '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', |
| 'echarts' |
| ], function (rainfallData, echarts) { |
| |
| var chart = echarts.init(document.getElementById('chart0'), null, { |
| |
| }); |
| |
| 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', |
| 'echarts' |
| ], function (rainfallData, echarts) { |
| |
| var chart = echarts.init(document.getElementById('chart1'), null, { |
| |
| }); |
| |
| 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', |
| 'echarts' |
| ], function (rainfallData, echarts) { |
| |
| var chart = echarts.init(document.getElementById('chart1'), null, { |
| |
| }); |
| |
| var option = { |
| tooltip: { |
| trigger: 'axis' |
| }, |
| dataZoom: { |
| show: true, |
| realtime: true, |
| startValue: '2009-09-20 12:00', |
| end: 100 |
| }, |
| 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> |
| |
| |
| |
| |
| |
| </body> |
| </html> |
