| <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 dataBJ = [ |
| [1,55,9,56,0.46,18,6,"良"], |
| [2,25,11,21,0.65,34,9,"优"], |
| [3,56,7,63,0.3,14,5,"良"], |
| [4,33,7,29,0.33,16,6,"优"], |
| [5,42,24,44,0.76,40,16,"优"], |
| [6,82,58,90,1.77,68,33,"良"], |
| [7,74,49,77,1.46,48,27,"良"], |
| [8,78,55,80,1.29,59,29,"良"], |
| [9,267,216,280,4.8,108,64,"重度污染"], |
| [10,185,127,216,2.52,61,27,"中度污染"], |
| [11,39,19,38,0.57,31,15,"优"], |
| [12,41,11,40,0.43,21,7,"优"], |
| [13,64,38,74,1.04,46,22,"良"], |
| [14,108,79,120,1.7,75,41,"轻度污染"], |
| [15,108,63,116,1.48,44,26,"轻度污染"], |
| [16,33,6,29,0.34,13,5,"优"], |
| [17,94,66,110,1.54,62,31,"良"], |
| [18,186,142,192,3.88,93,79,"中度污染"], |
| [19,57,31,54,0.96,32,14,"良"], |
| [20,22,8,17,0.48,23,10,"优"], |
| [21,39,15,36,0.61,29,13,"优"], |
| [22,94,69,114,2.08,73,39,"良"], |
| [23,99,73,110,2.43,76,48,"良"], |
| [24,31,12,30,0.5,32,16,"优"], |
| [25,42,27,43,1,53,22,"优"], |
| [26,154,117,157,3.05,92,58,"中度污染"], |
| [27,234,185,230,4.09,123,69,"重度污染"], |
| [28,160,120,186,2.77,91,50,"中度污染"], |
| [29,134,96,165,2.76,83,41,"轻度污染"], |
| [30,52,24,60,1.03,50,21,"良"], |
| [31,46,5,49,0.28,10,6,"优"] |
| ]; |
| |
| var dataGZ = [ |
| [1,26,37,27,1.163,27,13,"优"], |
| [2,85,62,71,1.195,60,8,"良"], |
| [3,78,38,74,1.363,37,7,"良"], |
| [4,21,21,36,0.634,40,9,"优"], |
| [5,41,42,46,0.915,81,13,"优"], |
| [6,56,52,69,1.067,92,16,"良"], |
| [7,64,30,28,0.924,51,2,"良"], |
| [8,55,48,74,1.236,75,26,"良"], |
| [9,76,85,113,1.237,114,27,"良"], |
| [10,91,81,104,1.041,56,40,"良"], |
| [11,84,39,60,0.964,25,11,"良"], |
| [12,64,51,101,0.862,58,23,"良"], |
| [13,70,69,120,1.198,65,36,"良"], |
| [14,77,105,178,2.549,64,16,"良"], |
| [15,109,68,87,0.996,74,29,"轻度污染"], |
| [16,73,68,97,0.905,51,34,"良"], |
| [17,54,27,47,0.592,53,12,"良"], |
| [18,51,61,97,0.811,65,19,"良"], |
| [19,91,71,121,1.374,43,18,"良"], |
| [20,73,102,182,2.787,44,19,"良"], |
| [21,73,50,76,0.717,31,20,"良"], |
| [22,84,94,140,2.238,68,18,"良"], |
| [23,93,77,104,1.165,53,7,"良"], |
| [24,99,130,227,3.97,55,15,"良"], |
| [25,146,84,139,1.094,40,17,"轻度污染"], |
| [26,113,108,137,1.481,48,15,"轻度污染"], |
| [27,81,48,62,1.619,26,3,"良"], |
| [28,56,48,68,1.336,37,9,"良"], |
| [29,82,92,174,3.29,0,13,"良"], |
| [30,106,116,188,3.628,101,16,"轻度污染"], |
| [31,118,50,0,1.383,76,11,"轻度污染"] |
| ]; |
| |
| var dataSH = [ |
| [1,91,45,125,0.82,34,23,"良"], |
| [2,65,27,78,0.86,45,29,"良"], |
| [3,83,60,84,1.09,73,27,"良"], |
| [4,109,81,121,1.28,68,51,"轻度污染"], |
| [5,106,77,114,1.07,55,51,"轻度污染"], |
| [6,109,81,121,1.28,68,51,"轻度污染"], |
| [7,106,77,114,1.07,55,51,"轻度污染"], |
| [8,89,65,78,0.86,51,26,"良"], |
| [9,53,33,47,0.64,50,17,"良"], |
| [10,80,55,80,1.01,75,24,"良"], |
| [11,117,81,124,1.03,45,24,"轻度污染"], |
| [12,99,71,142,1.1,62,42,"良"], |
| [13,95,69,130,1.28,74,50,"良"], |
| [14,116,87,131,1.47,84,40,"轻度污染"], |
| [15,108,80,121,1.3,85,37,"轻度污染"], |
| [16,134,83,167,1.16,57,43,"轻度污染"], |
| [17,79,43,107,1.05,59,37,"良"], |
| [18,71,46,89,0.86,64,25,"良"], |
| [19,97,71,113,1.17,88,31,"良"], |
| [20,84,57,91,0.85,55,31,"良"], |
| [21,87,63,101,0.9,56,41,"良"], |
| [22,104,77,119,1.09,73,48,"轻度污染"], |
| [23,87,62,100,1,72,28,"良"], |
| [24,168,128,172,1.49,97,56,"中度污染"], |
| [25,65,45,51,0.74,39,17,"良"], |
| [26,39,24,38,0.61,47,17,"优"], |
| [27,39,24,39,0.59,50,19,"优"], |
| [28,93,68,96,1.05,79,29,"良"], |
| [29,188,143,197,1.66,99,51,"中度污染"], |
| [30,174,131,174,1.55,108,50,"中度污染"], |
| [31,187,143,201,1.39,89,53,"中度污染"] |
| ]; |
| |
| function convertData(data) { |
| var result = []; |
| for (var i = 0; i < data.length; i++) { |
| var item = data[i].slice(); |
| var tmp = item[1]; |
| item[1] = item[2]; |
| item[2] = tmp; |
| result.push(item); |
| } |
| return result; |
| } |
| |
| var schema = [ |
| {name: 'date', index: 0, text: '日'}, |
| {name: 'AQIindex', index: 1, text: 'AQI指数'}, |
| {name: 'PM25', index: 2, text: 'PM2.5'}, |
| {name: 'PM10', index: 3, text: 'PM10'}, |
| {name: 'CO', index: 4, text: '一氧化碳（CO）'}, |
| {name: 'NO2', index: 5, text: '二氧化氮（NO2）'}, |
| {name: 'SO2', index: 6, text: '二氧化硫（SO2）'} |
| ]; |
| |
| |
| var itemStyle = { |
| normal: { |
| opacity: 0.8, |
| shadowBlur: 10, |
| shadowOffsetX: 0, |
| shadowOffsetY: 0, |
| shadowColor: 'rgba(0, 0, 0, 0.5)' |
| } |
| }; |
| |
| option = { |
| backgroundColor: '#333', |
| color: [ |
| '#dd4444', '#fec42c', '#80F1BE' |
| ], |
| title: { |
| text: '只是一个示意', |
| left: 20, |
| top: 10, |
| textStyle: { |
| color: '#777', |
| fontWeight: 'normal' |
| }, |
| borderColor: '#777', |
| borderWidth: 1 |
| }, |
| legend: { |
| top: 10, |
| data: ['上海', '北京', '广州'], |
| textStyle: { |
| color: '#fff', |
| fontSize: 16 |
| }, |
| selected: { |
| '上海': false, |
| '广州': false |
| } |
| }, |
| grid: { |
| left: '10%', |
| right: 200, |
| top: '18%', |
| bottom: '10%' |
| }, |
| tooltip: { |
| padding: 10, |
| backgroundColor: '#222', |
| borderColor: '#777', |
| borderWidth: 1, |
| formatter: function (obj) { |
| var value = obj.value; |
| return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' |
| + obj.seriesName + ' ' + value[0] + '日：' |
| + value[7] |
| + '</div>' |
| + schema[1].text + '：' + value[1] + '<br>' |
| + schema[2].text + '：' + value[2] + '<br>' |
| + schema[3].text + '：' + value[3] + '<br>' |
| + schema[4].text + '：' + value[4] + '<br>' |
| + schema[5].text + '：' + value[5] + '<br>' |
| + schema[6].text + '：' + value[6] + '<br>'; |
| } |
| }, |
| xAxis: { |
| type: 'value', |
| name: '日期', |
| nameGap: 16, |
| nameTextStyle: { |
| color: '#fff', |
| fontSize: 14 |
| }, |
| max: 31, |
| splitLine: { |
| show: false |
| }, |
| axisLine: { |
| lineStyle: { |
| color: '#777' |
| } |
| }, |
| axisTick: { |
| lineStyle: { |
| color: '#777' |
| } |
| }, |
| axisLabel: { |
| formatter: '{value}', |
| textStyle: { |
| color: '#fff' |
| } |
| } |
| }, |
| yAxis: { |
| type: 'value', |
| name: 'PM2.5', |
| nameLocation: 'end', |
| nameGap: 20, |
| nameTextStyle: { |
| color: '#fff', |
| fontSize: 16 |
| }, |
| axisLine: { |
| lineStyle: { |
| color: '#777' |
| } |
| }, |
| axisTick: { |
| lineStyle: { |
| color: '#777' |
| } |
| }, |
| splitLine: { |
| show: false |
| }, |
| axisLabel: { |
| textStyle: { |
| color: '#fff' |
| } |
| } |
| }, |
| visualMap: [ |
| { |
| right: 20, |
| top: '10%', |
| dimension: 6, |
| min: 0, |
| max: 100, |
| itemWidth: 30, |
| itemHeight: 120, |
| calculable: true, |
| precision: 0.1, |
| text: ['大小：SO2'], |
| textGap: 30, |
| textStyle: { |
| color: '#fff' |
| }, |
| inRange: { |
| symbolSize: [10, 70] |
| }, |
| outOfRange: { |
| symbolSize: [10, 70], |
| color: ['rgba(255,255,255,.2)'] |
| } |
| }, |
| { |
| right: 20, |
| bottom: '5%', |
| dimension: 7, |
| min: 0, |
| max: 50, |
| itemHeight: 20, |
| calculable: true, |
| precision: 0.1, |
| textGap: 30, |
| textStyle: { |
| color: '#fff' |
| }, |
| categories: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染'], |
| inRange: { |
| symbol: { |
| '优': 'path://m67.25,28.9c27.42,-69.1 134.84,0 0,88.85c-134.84,-88.85 -27.42,-157.96 0,-88.85z', |
| '良': 'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM22 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM10 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM16 28c-5.215 0-9.544-4.371-10-9.947 2.93 1.691 6.377 2.658 10 2.658s7.070-0.963 10-2.654c-0.455 5.576-4.785 9.942-10 9.942z', |
| '轻度污染': 'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zM22 7.375c1.999 0 3.625 1.626 3.625 3.625 0 0.199-0.017 0.402-0.051 0.604-0.051 0.301-0.311 0.521-0.616 0.521s-0.566-0.22-0.616-0.522c-0.192-1.146-1.177-1.666-2.341-1.666s-2.149 0.52-2.341 1.666c-0.050 0.301-0.311 0.522-0.616 0.522-0 0 0 0-0 0-0.305 0-0.566-0.22-0.616-0.521-0.034-0.201-0.051-0.404-0.051-0.604 0-1.999 1.626-3.625 3.625-3.625zM10 7.375c1.999 0 3.625 1.626 3.625 3.625 0 0.199-0.017 0.402-0.051 0.604-0.051 0.301-0.311 0.521-0.616 0.521s-0.566-0.22-0.616-0.522c-0.193-1.146-1.177-1.666-2.341-1.666s-2.149 0.52-2.341 1.666c-0.051 0.301-0.311 0.522-0.616 0.522 0 0 0 0 0 0-0.305 0-0.566-0.22-0.616-0.521-0.034-0.201-0.051-0.404-0.051-0.604 0-1.999 1.626-3.625 3.625-3.625zM6 18h6v7.745c-3.44-0.894-6-4.035-6-7.745zM14 26v-8h4v8h-4zM20 25.745v-7.745h6c0 3.71-2.559 6.851-6 7.745z', |
| '中度污染': 'path://M23.6 2c4.637 0 8.4 3.764 8.4 8.401 0 9.132-9.87 11.964-15.999 21.232-6.485-9.326-16.001-11.799-16.001-21.232 0-4.637 3.763-8.401 8.4-8.401 1.886 0 3.625 0.86 5.025 2.12l-2.425 3.88 7 4-4 10 11-12-7-4 1.934-2.901c1.107-0.68 2.35-1.099 3.665-1.099z', |
| '重度污染': 'path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z', |
| '严重污染': 'path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z' |
| } |
| } |
| } |
| ], |
| series: [ |
| { |
| name: '上海', |
| type: 'scatter', |
| itemStyle: itemStyle, |
| data: convertData(dataSH) |
| }, |
| { |
| name: '北京', |
| type: 'scatter', |
| itemStyle: itemStyle, |
| data: convertData(dataBJ) |
| }, |
| { |
| name: '广州', |
| type: 'scatter', |
| itemStyle: itemStyle, |
| data: convertData(dataGZ) |
| } |
| ] |
| }; |
| |
| myChart.setOption(option); |
| |
| </script> |
| </body> |
| </html> |
