| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="../common/echarts.min.js"></script> |
| <script src="../common/jquery.min.js"></script> |
| <link rel="stylesheet" href="../common/reset.css"> |
| </head> |
| <body> |
| <style> |
| </style> |
| <div id="main"></div> |
| <script> |
| |
| var myChart = echarts.init(document.getElementById('main')); |
| |
| var categoryData = ["2012-12-23","2012-12-24","2012-12-25","2012-12-26","2012-12-28","2012-12-29","2012-12-30","2012-12-31","2013-01-01","2013-01-02","2013-01-03","2013-01-04","2013-01-05","2013-01-06","2013-01-07","2013-01-08","2013-01-09","2013-01-10","2013-01-11","2013-01-12","2013-01-13","2013-01-14","2014-01-01","2014-01-02","2014-01-03","2014-01-04","2014-01-05","2014-01-06","2014-01-07","2014-01-10","2014-01-11","2014-01-12","2014-01-13","2014-01-14","2014-01-15","2014-01-16","2014-01-17","2014-01-18","2014-01-19","2014-01-21","2014-01-22","2014-01-23","2014-01-24","2014-01-26","2014-01-27","2014-01-28","2014-01-29","2014-01-30","2014-01-31","2014-02-01","2014-02-02","2014-02-05","2014-02-06","2014-02-07","2014-02-08","2014-02-10","2014-02-11","2014-02-12","2014-02-13","2014-02-14","2014-02-15","2014-02-16","2014-02-17","2014-02-18","2014-02-19","2014-02-20","2014-02-21","2014-02-22","2014-02-23","2014-02-24","2014-02-25","2014-02-28","2014-03-01","2014-03-02","2014-03-03","2014-03-04","2014-03-07","2014-03-08","2014-03-09","2014-03-10","2014-03-11","2014-03-13","2014-03-14","2014-03-15","2014-03-16","2014-03-17","2014-03-18","2014-03-19","2014-03-21","2014-03-22","2014-03-23","2014-03-24","2014-03-25","2014-03-26","2014-03-27","2014-03-28","2014-03-29","2014-03-30","2014-03-31","2014-04-01","2014-04-02","2014-04-03","2014-04-04","2014-04-05","2014-04-06","2014-04-07","2014-04-08","2014-04-09","2014-04-10","2014-04-11","2014-04-12","2014-04-13","2014-04-14","2014-04-15","2014-04-16","2014-04-17","2014-04-18","2014-04-19","2014-04-20","2014-04-21","2014-04-22","2014-04-23","2014-04-24","2014-04-25","2014-04-26","2014-04-27","2014-04-28","2014-04-29","2014-04-30","2014-05-01","2014-05-03","2014-05-04","2014-05-05","2014-05-06","2014-05-07","2014-05-08","2014-05-09","2014-05-10","2014-05-12","2014-05-13","2014-05-14","2014-05-15","2014-05-16","2014-05-17","2014-05-18","2014-05-19","2014-05-20","2014-05-21","2014-05-22","2014-05-23","2014-05-24","2014-05-25","2014-05-26","2014-05-27","2014-05-28","2014-05-29","2014-05-30","2014-05-31","2014-06-01","2014-06-02","2014-06-03","2014-06-04","2014-06-05","2014-06-06","2014-06-07","2014-06-08","2014-06-09","2014-06-10","2014-06-11","2014-06-12","2014-06-13","2014-06-14","2014-06-15","2014-06-16","2014-06-17","2014-06-18","2014-06-19","2014-06-20","2014-06-21","2014-06-22","2014-06-23","2014-06-24","2014-06-25","2014-06-26","2014-06-27","2014-06-28","2014-06-29","2014-06-30","2014-07-01","2014-07-02","2014-07-03","2014-07-04","2014-07-05","2014-07-06","2014-07-07","2014-07-08","2014-07-09","2014-07-10","2014-07-11","2014-07-12","2014-07-13","2014-07-14","2014-07-15","2014-07-16","2014-07-17","2014-07-18","2014-07-19","2014-07-20","2014-07-21","2014-07-22","2014-07-23","2014-07-24","2014-07-25","2014-07-26","2014-07-27","2014-07-28","2014-07-29","2014-07-30","2014-07-31","2014-08-01","2014-08-02","2014-08-03","2014-08-05","2014-08-06","2014-08-07","2014-08-08","2014-08-09","2014-08-10","2014-08-11","2014-08-12","2014-08-13","2014-08-14","2014-08-15","2014-08-16","2014-08-17","2014-08-18","2014-08-19","2014-08-20","2014-08-21","2014-08-22","2014-08-23","2014-08-24","2014-08-25","2014-08-26","2014-08-27","2014-08-28","2014-08-29","2014-08-30","2014-08-31","2014-09-01","2014-09-03","2014-09-04","2014-09-05","2014-09-06","2014-09-07","2014-09-08","2014-09-09","2014-09-10","2014-09-11","2014-09-12","2014-09-13","2014-09-14","2014-09-15","2014-09-16","2014-09-17","2014-09-18","2014-09-19","2014-09-20","2014-09-21","2014-09-22","2014-09-23","2014-09-24","2014-09-25","2014-09-26","2014-09-27","2014-09-28","2014-09-29","2014-09-30","2014-10-01","2014-10-02","2014-10-03","2014-10-04","2014-10-05","2014-10-06","2014-10-07","2014-10-08","2014-10-09","2014-10-10","2014-10-11","2014-10-14","2014-10-15","2014-10-16","2014-10-17","2014-10-18","2014-10-19","2014-10-20","2014-10-21","2014-10-22","2014-10-23","2014-10-24","2014-10-25","2014-10-26","2014-10-27","2014-10-28","2014-10-29","2014-10-30","2014-10-31","2014-11-01","2014-11-03","2014-11-04","2014-11-05","2014-11-07","2014-11-08","2014-11-09","2014-11-10","2014-11-11","2014-11-13","2014-11-14","2014-11-15","2014-11-16","2014-11-17","2014-11-18","2014-11-19","2014-11-23","2014-11-24","2014-11-25","2014-11-26","2014-11-27","2014-11-28","2014-11-29","2014-12-01","2014-12-02","2014-12-03","2014-12-05","2014-12-06","2014-12-07","2014-12-08","2014-12-09","2014-12-10","2014-12-11","2014-12-13","2014-12-14","2014-12-15","2014-12-17","2014-12-19","2014-12-22","2014-12-23","2014-12-25","2014-12-26","2014-12-27","2014-12-28","2014-12-29","2014-12-30","2015-01-01","2015-01-02","2015-01-03","2015-01-04","2015-01-05","2015-01-06","2015-01-07","2015-01-08","2015-01-09","2015-01-10","2015-01-11","2015-01-12","2015-01-13","2015-01-14","2015-01-15","2015-01-16","2015-01-17","2015-01-18","2015-01-19","2015-01-20","2015-01-22","2015-01-23","2015-01-24","2015-01-25","2015-01-26","2015-01-28","2015-01-29","2015-01-31","2015-02-01","2015-02-02","2015-02-03","2015-02-05","2015-02-06","2015-02-09","2015-02-10","2015-02-11","2015-02-12","2015-02-13","2015-02-14","2015-02-15","2015-02-16","2015-02-18","2015-02-19","2015-02-20","2015-02-21","2015-02-22","2015-02-23","2015-02-24"]; |
| |
| var data0 = [36,53,58,67,137,94,38,57,71,27,35,57,79,58,105,124,32,87,232,174,498,184,85,158,74,165,113,190,122,95,159,52,117,113,180,403,209,113,149,68,162,276,195,77,114,67,165,93,188,178,85,119,158,124,84,53,142,150,242,329,429,348,118,98,92,270,311,311,255,313,404,113,68,189,268,67,70,179,127,110,195,69,64,133,145,142,85,73,62,86,186,271,255,331,285,169,63,77,183,147,133,66,91,68,98,135,223,156,246,83,133,212,270,109,90,124,182,84,84,73,85,156,156,163,69,74,83,122,139,156,93,57,54,105,82,104,84,69,74,86,59,122,92,124,171,146,113,170,183,140,104,91,77,107,121,120,192,177,130,90,117,124,157,103,51,70,87,95,74,90,116,165,178,178,104,116,116,84,96,91,115,161,138,163,68,77,161,185,172,80,248,237,165,256,216,134,63,114,77,80,64,156,140,133,186,182,106,119,68,54,82,90,134,188,194,159,159,169,244,199,163,149,80,67,162,140,143,125,76,119,70,104,109,159,124,135,150,164,169,83,155,75,59,78,136,103,104,176,89,127,54,100,140,186,200,61,109,111,114,97,94,66,54,87,80,84,117,168,129,127,64,60,144,170,58,87,70,53,92,78,123,95,54,68,200,314,379,346,233,80,73,76,132,211,289,250,82,99,163,267,353,78,72,88,140,206,204,65,59,150,79,63,93,80,95,59,65,77,143,98,64,93,282,155,94,196,293,83,114,276,54,65,51,62,89,65,82,276,153,52,69,113,82,99,53,103,100,73,155,243,155,125,65,65,79,200,226,122,60,85,190,105,208,59,160,211,265,386,118,89,94,77,113,143,257,117,185,119,65,87,60,108,188,143,62,100,152,166,55,59,175,293,326,153,73,267,183,394,158,86,207]; |
| |
| var data1 = [42,102,91,111,109,107,7,22,123,47,62,31,41,21,73,133,25,89,256,184,554,158,55,195,69,204,84,163,181,83,139,93,109,153,181,426,196,74,139,99,175,245,166,38,148,85,158,78,174,171,144,112,121,111,119,90,188,129,222,306,390,335,164,85,68,230,361,326,290,321,391,88,118,185,303,54,65,156,178,127,164,79,52,181,179,112,101,68,78,80,180,251,276,345,283,195,118,82,176,123,157,117,80,74,149,169,251,147,213,119,132,224,313,169,99,102,198,48,55,122,107,197,175,158,89,72,60,96,171,126,74,107,107,130,58,83,106,119,106,109,80,102,134,111,142,194,74,147,207,169,117,77,111,158,176,138,164,206,156,146,142,88,123,102,100,127,102,94,107,106,94,224,238,166,123,147,132,143,72,73,112,197,168,172,96,38,178,163,138,133,264,211,150,220,218,125,103,165,94,87,101,155,192,93,185,227,162,121,123,111,69,69,117,157,246,127,205,165,279,193,184,128,108,50,141,122,184,137,94,124,113,121,89,211,85,161,157,171,228,112,153,70,95,53,190,114,84,214,71,187,33,115,180,232,164,101,143,93,145,69,121,118,103,91,109,104,135,205,137,110,113,99,106,200,84,122,96,20,74,48,124,68,49,107,192,325,371,395,260,45,121,74,180,215,330,234,62,76,123,274,386,130,42,100,183,257,259,65,25,137,58,63,72,93,100,86,26,51,199,139,72,149,247,155,68,171,292,67,103,254,102,117,73,48,51,99,140,282,118,85,89,122,121,125,51,161,120,98,149,252,210,124,87,47,40,186,207,148,53,116,211,109,183,23,132,222,238,394,93,79,77,129,139,110,248,167,215,157,37,134,92,127,226,178,53,72,113,132,51,114,168,339,308,163,113,280,179,410,159,114,204]; |
| |
| myChart.setOption({ |
| backgroundColor: '#eee', |
| tooltip: { |
| trigger: 'axis' |
| }, |
| xAxis: { |
| data: categoryData |
| }, |
| yAxis: { |
| splitLine: { |
| show: false |
| } |
| }, |
| grid: { |
| top: 50, |
| bottom: 70, |
| right: 170, |
| left: 80 |
| }, |
| legend: { |
| left: 'center', |
| top: 10, |
| data: ['某城市 AQI', '平均 AQI'] |
| }, |
| toolbox: { |
| top: 10, |
| right: 10, |
| feature: { |
| dataZoom: { |
| yAxisIndex: 'none' |
| }, |
| restore: {}, |
| saveAsImage: {} |
| } |
| }, |
| dataZoom: [{ |
| startValue: '2014-12-26', |
| endValue: '2015-02-02' |
| }, { |
| type: 'inside', |
| startValue: '2014-12-26', |
| endValue: '2015-02-02' |
| }], |
| visualMap: { |
| top: 'middle', |
| right: 10, |
| inRange: { |
| color: ['green', '#cc1a00'] |
| }, |
| seriesIndex: 0, |
| pieces: [{ |
| gt: 0, |
| lte: 50 |
| }, { |
| gt: 50, |
| lte: 100 |
| }, { |
| gt: 100, |
| lte: 150 |
| }, { |
| gt: 150, |
| lte: 200 |
| }, { |
| gt: 200, |
| lte: 300 |
| }, { |
| gt: 300 |
| }], |
| outOfRange: { |
| color: '#999' |
| } |
| }, |
| series: [{ |
| name: '某城市 AQI', |
| type: 'line', |
| data: data0, |
| lineStyle: { |
| normal: { |
| width: 5 |
| } |
| }, |
| markLine: { |
| lineStyle: { |
| normal: { |
| color: '#999' |
| } |
| }, |
| silent: true, |
| symbol: ['none', 'none'], |
| data: [{ |
| label: {normal: {formatter: '优\n'}}, |
| yAxis: 0 |
| }, { |
| label: {normal: {formatter: '良\n'}}, |
| yAxis: 50 |
| }, { |
| label: {normal: {formatter: '轻度污染\n'}}, |
| yAxis: 100 |
| }, { |
| label: {normal: {formatter: '中度污染\n'}}, |
| yAxis: 150 |
| }, { |
| label: {normal: {formatter: '重度污染\n'}}, |
| yAxis: 200 |
| }, { |
| label: {normal: {formatter: '严重污染\n'}}, |
| yAxis: 300 |
| }] |
| } |
| }, { |
| name: '平均 AQI', |
| type: 'line', |
| data: data1, |
| areaStyle: {normal: { |
| color: 'rgba(0,0,0,0.2)' |
| }}, |
| lineStyle: {normal: { |
| color: 'rgba(0,0,0,0.2)' |
| }} |
| }] |
| }); |
| |
| </script> |
| </body> |
| </html> |
