1.程序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ECharts</title> 6 <!-- 引入 echarts.js --> 7 <script src="../echarts.min.js"></script> 8 </head> 9 <body> 10 <!-- 为ECharts准备一个具备大小（宽高）的Dom --> 11 <div id="main" style=" 900px;height:600px;"></div> 12 <script type="text/javascript"> 13 // 基于准备好的dom，初始化echarts实例 14 var myChart = echarts.init(document.getElementById('main')); 15 16 // 指定图表的配置项和数据 17 var dataBJ = [ 18 [1,55,9,56,0.46,18,6,"良"], 19 [2,25,11,21,0.65,34,9,"优"], 20 [3,56,7,63,0.3,14,5,"良"], 21 [4,33,7,29,0.33,16,6,"优"], 22 [5,42,24,44,0.76,40,16,"优"], 23 [6,82,58,90,1.77,68,33,"良"], 24 [7,74,49,77,1.46,48,27,"良"], 25 [8,78,55,80,1.29,59,29,"良"], 26 [9,267,216,280,4.8,108,64,"重度污染"], 27 [10,185,127,216,2.52,61,27,"中度污染"], 28 [11,39,19,38,0.57,31,15,"优"], 29 [12,41,11,40,0.43,21,7,"优"], 30 [13,64,38,74,1.04,46,22,"良"], 31 [14,108,79,120,1.7,75,41,"轻度污染"], 32 [15,108,63,116,1.48,44,26,"轻度污染"], 33 [16,33,6,29,0.34,13,5,"优"], 34 [17,94,66,110,1.54,62,31,"良"], 35 [18,186,142,192,3.88,93,79,"中度污染"], 36 [19,57,31,54,0.96,32,14,"良"], 37 [20,22,8,17,0.48,23,10,"优"], 38 [21,39,15,36,0.61,29,13,"优"], 39 [22,94,69,114,2.08,73,39,"良"], 40 [23,99,73,110,2.43,76,48,"良"], 41 [24,31,12,30,0.5,32,16,"优"], 42 [25,42,27,43,1,53,22,"优"], 43 [26,154,117,157,3.05,92,58,"中度污染"], 44 [27,234,185,230,4.09,123,69,"重度污染"], 45 [28,160,120,186,2.77,91,50,"中度污染"], 46 [29,134,96,165,2.76,83,41,"轻度污染"], 47 [30,52,24,60,1.03,50,21,"良"], 48 [31,46,5,49,0.28,10,6,"优"] 49 ]; 50 51 var dataGZ = [ 52 [1,26,37,27,1.163,27,13,"优"], 53 [2,85,62,71,1.195,60,8,"良"], 54 [3,78,38,74,1.363,37,7,"良"], 55 [4,21,21,36,0.634,40,9,"优"], 56 [5,41,42,46,0.915,81,13,"优"], 57 [6,56,52,69,1.067,92,16,"良"], 58 [7,64,30,28,0.924,51,2,"良"], 59 [8,55,48,74,1.236,75,26,"良"], 60 [9,76,85,113,1.237,114,27,"良"], 61 [10,91,81,104,1.041,56,40,"良"], 62 [11,84,39,60,0.964,25,11,"良"], 63 [12,64,51,101,0.862,58,23,"良"], 64 [13,70,69,120,1.198,65,36,"良"], 65 [14,77,105,178,2.549,64,16,"良"], 66 [15,109,68,87,0.996,74,29,"轻度污染"], 67 [16,73,68,97,0.905,51,34,"良"], 68 [17,54,27,47,0.592,53,12,"良"], 69 [18,51,61,97,0.811,65,19,"良"], 70 [19,91,71,121,1.374,43,18,"良"], 71 [20,73,102,182,2.787,44,19,"良"], 72 [21,73,50,76,0.717,31,20,"良"], 73 [22,84,94,140,2.238,68,18,"良"], 74 [23,93,77,104,1.165,53,7,"良"], 75 [24,99,130,227,3.97,55,15,"良"], 76 [25,146,84,139,1.094,40,17,"轻度污染"], 77 [26,113,108,137,1.481,48,15,"轻度污染"], 78 [27,81,48,62,1.619,26,3,"良"], 79 [28,56,48,68,1.336,37,9,"良"], 80 [29,82,92,174,3.29,0,13,"良"], 81 [30,106,116,188,3.628,101,16,"轻度污染"], 82 [31,118,50,0,1.383,76,11,"轻度污染"] 83 ]; 84 85 var dataSH = [ 86 [1,91,45,125,0.82,34,23,"良"], 87 [2,65,27,78,0.86,45,29,"良"], 88 [3,83,60,84,1.09,73,27,"良"], 89 [4,109,81,121,1.28,68,51,"轻度污染"], 90 [5,106,77,114,1.07,55,51,"轻度污染"], 91 [6,109,81,121,1.28,68,51,"轻度污染"], 92 [7,106,77,114,1.07,55,51,"轻度污染"], 93 [8,89,65,78,0.86,51,26,"良"], 94 [9,53,33,47,0.64,50,17,"良"], 95 [10,80,55,80,1.01,75,24,"良"], 96 [11,117,81,124,1.03,45,24,"轻度污染"], 97 [12,99,71,142,1.1,62,42,"良"], 98 [13,95,69,130,1.28,74,50,"良"], 99 [14,116,87,131,1.47,84,40,"轻度污染"], 100 [15,108,80,121,1.3,85,37,"轻度污染"], 101 [16,134,83,167,1.16,57,43,"轻度污染"], 102 [17,79,43,107,1.05,59,37,"良"], 103 [18,71,46,89,0.86,64,25,"良"], 104 [19,97,71,113,1.17,88,31,"良"], 105 [20,84,57,91,0.85,55,31,"良"], 106 [21,87,63,101,0.9,56,41,"良"], 107 [22,104,77,119,1.09,73,48,"轻度污染"], 108 [23,87,62,100,1,72,28,"良"], 109 [24,168,128,172,1.49,97,56,"中度污染"], 110 [25,65,45,51,0.74,39,17,"良"], 111 [26,39,24,38,0.61,47,17,"优"], 112 [27,39,24,39,0.59,50,19,"优"], 113 [28,93,68,96,1.05,79,29,"良"], 114 [29,188,143,197,1.66,99,51,"中度污染"], 115 [30,174,131,174,1.55,108,50,"中度污染"], 116 [31,187,143,201,1.39,89,53,"中度污染"] 117 ]; 118 119 var schema = [ 120 {name: 'date', index: 0, text: '日'}, 121 {name: 'AQIindex', index: 1, text: 'AQI指数'}, 122 {name: 'PM25', index: 2, text: 'PM2.5'}, 123 {name: 'PM10', index: 3, text: 'PM10'}, 124 {name: 'CO', index: 4, text: '一氧化碳（CO）'}, 125 {name: 'NO2', index: 5, text: '二氧化氮（NO2）'}, 126 {name: 'SO2', index: 6, text: '二氧化硫（SO2）'} 127 ]; 128 129 130 var itemStyle = { 131 normal: { 132 opacity: 0.8, 133 shadowBlur: 10, 134 shadowOffsetX: 0, 135 shadowOffsetY: 0, 136 shadowColor: 'rgba(0, 0, 0, 0.5)' 137 } 138 }; 139 140 option = { 141 backgroundColor: '#333', 142 color: [ 143 '#dd4444', '#fec42c', '#80F1BE' 144 ], 145 legend: { 146 y: 'top', 147 data: ['北京', '上海', '广州'], 148 textStyle: { 149 color: '#fff', 150 fontSize: 16 151 } 152 }, 153 grid: { 154 x: '10%', 155 x2: 150, 156 y: '18%', 157 y2: '10%' 158 }, 159 tooltip: { 160 padding: 10, 161 backgroundColor: '#222', 162 borderColor: '#777', 163 borderWidth: 1, 164 formatter: function (obj) { 165 var value = obj.value; 166 return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' 167 + obj.seriesName + ' ' + value[0] + '日：' 168 + value[7] 169 + '</div>' 170 + schema[1].text + '：' + value[1] + '<br>' 171 + schema[2].text + '：' + value[2] + '<br>' 172 + schema[3].text + '：' + value[3] + '<br>' 173 + schema[4].text + '：' + value[4] + '<br>' 174 + schema[5].text + '：' + value[5] + '<br>' 175 + schema[6].text + '：' + value[6] + '<br>'; 176 } 177 }, 178 xAxis: { 179 type: 'value', 180 name: '日期', 181 nameGap: 16, 182 nameTextStyle: { 183 color: '#fff', 184 fontSize: 14 185 }, 186 max: 31, 187 splitLine: { 188 show: false 189 }, 190 axisLine: { 191 lineStyle: { 192 color: '#777' 193 } 194 }, 195 axisTick: { 196 lineStyle: { 197 color: '#777' 198 } 199 }, 200 axisLabel: { 201 formatter: '{value}', 202 textStyle: { 203 color: '#fff' 204 } 205 } 206 }, 207 yAxis: { 208 type: 'value', 209 name: 'AQI指数', 210 nameLocation: 'end', 211 nameGap: 20, 212 nameTextStyle: { 213 color: '#fff', 214 fontSize: 16 215 }, 216 axisLine: { 217 lineStyle: { 218 color: '#777' 219 } 220 }, 221 axisTick: { 222 lineStyle: { 223 color: '#777' 224 } 225 }, 226 splitLine: { 227 show: false 228 }, 229 axisLabel: { 230 textStyle: { 231 color: '#fff' 232 } 233 } 234 }, 235 visualMap: [ 236 { 237 left: 'right', 238 top: '10%', 239 dimension: 2, 240 min: 0, 241 max: 250, 242 itemWidth: 30, 243 itemHeight: 120, 244 calculable: true, 245 precision: 0.1, 246 text: ['圆形大小：PM2.5'], 247 textGap: 30, 248 textStyle: { 249 color: '#fff' 250 }, 251 inRange: { 252 symbolSize: [10, 70] 253 }, 254 outOfRange: { 255 symbolSize: [10, 70], 256 color: ['rgba(255,255,255,.2)'] 257 }, 258 controller: { 259 inRange: { 260 color: ['#c23531'] 261 }, 262 outOfRange: { 263 color: ['#444'] 264 } 265 } 266 }, 267 { 268 left: 'right', 269 bottom: '5%', 270 dimension: 6, 271 min: 0, 272 max: 50, 273 itemHeight: 120, 274 calculable: true, 275 precision: 0.1, 276 text: ['明暗：二氧化硫'], 277 textGap: 30, 278 textStyle: { 279 color: '#fff' 280 }, 281 inRange: { 282 colorLightness: [1, 0.5] 283 }, 284 outOfRange: { 285 color: ['rgba(255,255,255,.2)'] 286 }, 287 controller: { 288 inRange: { 289 color: ['#c23531'] 290 }, 291 outOfRange: { 292 color: ['#444'] 293 } 294 } 295 } 296 ], 297 series: [ 298 { 299 name: '北京', 300 type: 'scatter', 301 itemStyle: itemStyle, 302 data: dataBJ 303 }, 304 { 305 name: '上海', 306 type: 'scatter', 307 itemStyle: itemStyle, 308 data: dataSH 309 }, 310 { 311 name: '广州', 312 type: 'scatter', 313 itemStyle: itemStyle, 314 data: dataGZ 315 } 316 ] 317 }; 318 319 // 使用刚指定的配置项和数据显示图表。 320 myChart.setOption(option); 321 </script> 322 </body> 323 </html>
2.效果
3.右侧的视觉映射
