在公司内部或前台，有时需要展示数字化看板，展示公司的业务信息。看着别的公司展示的炫酷的数字化大屏，是否很羡慕？本文以Python+flask+jQuery+eCharts，简述如何开发数字化大屏进行数据展示，仅供学习分享使用，如有不足之处，还请指正。
涉及知识点
- Python+flask开发web系统，实现数据传输。
- jQuery通过ajax技术，实现数据的异步通信，局部刷新。
- eCharts进行图表的展示（包括柱状图，折线图，地图等）。
- html+css页面布局等技术。
示例效果图
在本例中，主要展示某公司的产品累计趋势，产品新增趋势，销售柱状图，地图等内容，包括数字，图表等方式，具体如下所示：
页面设计
为了数据展示，将数字化大屏页面分为8个部分（标题，时间，左1，左2，中1，中2，右1，右2）如下所示：
页面布局核心代码，如下所示：
1 <!DOCTYPE html> 2 <html lang="en" 3 head 4 meta charset="UTF-8" 5 title>数字化大屏</ 6 link rel="stylesheet" href="../static/css/main.css" 7 8 body 9 header class="head"10 div ="title"11 h1>某某公司数字化大屏12 div13 ="time"></14 header15 aside ="left"16 id="left1" class="left1">这里是左侧边栏117 ="left2"="left2">这里是左侧边栏218 aside19 section ="center"20 ="center1"21 ="num">112322 >23423 >134524 >45625 ="txt">累计生产26 >剩余生产27 >累计销售28 >累计返厂29 30 ="center2" id="center2"31 section32 ="right"33 ="right1"="right1">这里是右侧边栏134 ="right2"="right2">这里是右侧边栏235 36 37 html>
核心代码
后台数据
在本例中，flask做为web开发框架，提供了一个轻量级的实现web服务的功能。另本为了演示，实现了部分功能，其他则为静态数据，如下所示：
from flask import Flask request render_template 4 jsonify 5 random 6 7 app = Flask(__name__) 8 9 10 @app.route('/main'11 def main(): return render_template(main.html13 14 15 @app.route(/get_c1_data',methods=[getpost]) 16 get_c1_data(): 17 """获取C1数据""" 18 total_confirmed = random.randint(0,10000) # 累计生产 19 remain_suspect = random.randint(0,5000) 剩余生产 20 total_cure = random.randint(0,1)"> 累计销售 21 total_dead = random.randint(0,200) 累计返厂 22 return jsonify({"total_confirmed": total_confirmed,1)">remain_suspect": remain_suspect,1)">total_cure": total_cure,23 total_dead: total_dead}) 24 25 26 if __name__ == __main__: 27 app.run()
注意：jQuery进行ajax数据访问，返回的json格式的数据，所以引入flask中的jsonify模块，进行数据转换。
ajax访问
在本例中，为了实现局部刷新，采用ajax的方式进行访问，如下所示：
1 <script type="text/javascript"> 2 function get_time() { 3 var cur_time = new Date(); 4 var str_time = cur_time.getFullYear() + "年" + ((cur_time.getMonth() + 1) > 9 ? (cur_time.getMonth() + 1) : "0" + (cur_time.getMonth() + 1)) + "月" + (cur_time.getDate() > 9 ? cur_time.getDate() : "0" + cur_time.getDate()) + "日" + " " + (cur_time.getHours() > 9 ? cur_time.getHours() : "0" + cur_time.getHours()) + ":" + (cur_time.getMinutes() > 9 ? cur_time.getMinutes() : "0" + cur_time.getMinutes()) + ":" + (cur_time.getSeconds() > 9 ? cur_time.getSeconds() : "0" + cur_time.getSeconds()); 5 $(".time").text(str_time); 6 } 7 8 get_c1_data() { $.ajax({ 10 url: "/get_c1_data",1)">11 type: "post"12 success: (data) { 13 $(".num").eq(0).text(data.total_confirmed); 14 $(".num").eq(1).text(data.remain_suspect); 15 $(".num").eq(2).text(data.total_cure); 16 $(".num").eq(3).text(data.total_dead); 17 },1)">19 error: () { 20 21 } 22 }); 23 25 $(document).ready( get_time(); 27 get_c1_data(); 28 setInterval(get_time,1000); 29 setInterval(get_c1_data,1)">30 }); 31 </script>
图表展示
在本例中，展示了多种图表，且各自独立，为了方便起见，将各个模块的图表，单独保存在js文件中。
折线图（累计趋势图）
var left1 = document.getElementById('left1'var ec_left1 = echarts.init(left1,'dark'var ec_left1_option; 4 5 ec_left1_option = { title: { 7 text: '某某产品累计趋势' 8 left:'left' },1)">10 tooltip: { 11 trigger: 'axis' 12 13 legend: { 14 data: ['累计生产','剩余生产','累计销售','累计返厂'],1)">15 left:'right' 17 grid: { 18 left: '3%'19 right: '4%'20 bottom: '3%'21 containLabel: true 23 // toolbox: { 24 feature: { 25 saveAsImage: {} 26 } 27 }, 28 xAxis: { 29 type: 'category'30 boundaryGap: false31 data: ['09-24','09-25','09-26','09-27','09-28','09-29','09-30'] 33 yAxis: { 34 type: 'value' series: [ { 38 name: '累计生产'39 type: 'line'40 stack: 'Total',1)">41 data: [120,132,101,134,90,230,21042 },1)">43 44 name: '剩余生产'45 type: 'line'46 47 data: [220,182,191,234,290,330,31048 49 50 name: '累计销售'51 type: 'line'52 53 data: [150,232,201,154,190,41054 55 56 name: '累计返厂'57 type: 'line'58 59 data: [320,332,301,334,390,32060 } 61 ] 62 }; 63 64 ec_left1_option && ec_left1.setOption(ec_left1_option);
折线（新增趋势图）
var left2 = document.getElementById('left2'var ec_left2 = echarts.init(left2,1)"> ec_left2_option; 5 ec_left2_option = 7 text: '某某公司产品新增趋势'14 data: ['每日数量','每日累计'38 name: '每日数量'44 name: '每日累计'47 data: [320,1)">50 51 52 ec_left2_option && ec_left2.setOption(ec_left2_option);
柱状图
var right1 = document.getElementById('right1'var ec_right1 = echarts.init(right1,1)"> ec_right1_option; 5 ec_right1_option = title: { 7 text: '非重点城市销售Top5' 8 left:'center' 11 type: 'category'12 data: ['广东','河南','江苏','湖南','河北','沈阳','吉林'15 type: 'value' 19 data: [120,200,150,80,70,110,13020 type: 'bar' 25 ec_right1_option && ec_right1.setOption(ec_right1_option);
圆盘转速图
1 var right2 = document.getElementById('right2' 2 var ec_right2 = echarts.init(right2,1)"> 3 ec_right2_option; 4 5 ec_right2_option = 6 backgroundColor: '#333' 7 tooltip: { 8 formatter: '{a} <br/>{b} : {c}%' 9 10 11 12 restore: {},1)"> 13 14 15 16 17 left 18 19 name: 'gauge 0' 20 type: 'gauge' 21 min: -200 22 max: 250 23 startAngle: -30 24 endAngle: -315 25 splitNumber: 9 26 radius: '35%' 27 center: ['21%','55%' 28 axisLine: { 29 lineStyle: { 30 color: [[1,'#AE96A6']] 31 32 },1)"> 33 splitLine: { 34 show: false 35 36 axisTick: { 37 show: 38 39 axisLabel: { 40 show: 41 42 anchor: {},1)"> 43 pointer: { 44 show: 45 46 detail: { 47 show: 48 49 title: { 50 fontSize: 8 51 fontWeight: 800 52 fontFamily: 'Arial' 53 color: '#fff' 54 offsetCenter: [0,'-60%' 55 56 progress: { 57 show: true 58 width: 3 59 itemStyle: { 60 color: '#fff' 61 62 63 data: [ 64 { 65 value: 250 66 name: 'km/h' 67 68 ] 69 70 71 name: 'gauge 1' 72 type: 'gauge' 73 min: 0 74 max: 250 75 startAngle: -140 76 endAngle: -305 77 splitNumber: 5 78 radius: '35%' 79 center: ['21%',1)"> 80 81 82 color: [[1,1)"> 83 84 85 86 distance: -7 87 length: 12 88 89 color: '#fff' 90 width: 4 91 92 93 94 distance: -8 95 length: 8 96 97 color: '#fff' 98 width: 2 99 100 101 102 distance: 14103 fontSize: 10104 fontWeight: 800105 fontFamily: 'Arial'106 color: '#fff' 107 108 109 110 icon: 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0.2v92.3c0,0.6,0.4,1,1h9c0.6,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z'111 width: 5112 length: '40%'113 offsetCenter: [0,'-58%'114 115 color: '#f00'116 shadowColor: 'rgba(255,0)'117 shadowBlur: 5118 shadowOffsetY: 2 119 120 121 122 color: '#fff'123 fontSize: 14124 fontWeight: 800125 fontFamily: 'Arial'126 offsetCenter: [0,0127 128 129 show: 130 131 132 133 value: 0134 name: '当前位置：\n \n 中科路' 135 136 137 138 middle 139 140 name: 'gauge 2'141 type: 'gauge'142 min: 0143 max: 8144 z: 10145 startAngle: 210146 endAngle: -30147 splitNumber: 8148 radius: '50%'149 center: ['50%','50%'150 151 show: 152 153 width: 0154 color: [ 155 [0.825,'#fff'156 [1,'#f00'157 ] 158 159 160 161 distance: 20162 length: 15163 164 color: 'auto'165 width: 4166 shadowColor: 'rgba(255,0.5)'167 shadowBlur: 15168 shadowOffsetY: -10 169 170 171 172 distance: 20173 length: 8174 175 color: 'auto'176 width: 2177 shadowColor: 'rgba(255,255)'178 shadowBlur: 10179 shadowOffsetY: -10 180 181 182 183 distance: 10184 fontSize: 15185 fontWeight: 800186 fontFamily: 'Arial'187 color: '#fff' 188 189 190 191 icon: 'path://M-36.5,1)">192 width: 10193 offsetCenter: [0,'-10%'194 length: '75%'195 196 color: '#f00'197 shadowColor: 'rgba(255,1)">198 shadowBlur: 5199 shadowOffsetY: 3 200 201 202 203 color: '#fff'204 fontSize: 12205 fontWeight: 800206 fontFamily: 'Arial'207 offsetCenter: [0,'-30%'208 209 210 211 value: 0.6212 name: '1/min x 1000' 213 214 ],1)">215 216 show: 217 } 218 219 220 name: 'gauge 3'221 type: 'gauge'222 min: 0223 max: 8224 z: 10225 splitNumber: 8226 radius: '50%'227 228 229 width: 14230 color: [[1,'#000'231 232 233 234 show: 235 236 237 show: 238 239 240 show: 241 242 243 244 show: 245 246 247 show: 248 249 250 offsetCenter: ['25%',1)">251 formatter: '{a|{value}}{b|km/h}'252 rich: { 253 a: { 254 fontSize: 20255 fontWeight: 800256 fontFamily: 'Arial'257 color: '#fff'258 align: 'center'259 padding: [0,5,1)">260 },1)">261 b: { 262 fontSize: 14263 fontWeight: 800264 fontFamily: 'Arial'265 color: '#fff'266 padding: [0,20,1)">267 } 268 269 270 value is speed 271 272 273 value: 0274 name: '' 275 276 277 278 right 279 280 name: 'gauge 4'281 type: 'gauge'282 min: 0283 max: 8284 startAngle: 135285 endAngle: -150286 splitNumber: 8287 radius: '35%'288 center: ['79%',1)">289 290 291 color: [[1,1)">292 293 294 295 show: 296 297 298 show: 299 300 301 show: 302 303 304 305 show: 306 307 title: {},1)">308 309 offsetCenter: ['-15%',1)">310 formatter: [ 311 '{a| 00:00}'312 '{a|行驶时间 0:00}{b| h}'313 '{a|行驶距离 0.0}{b| km}'314 '{a|平均耗能 ---}{b| 1/100km}'315 '{a|平均速度 ---}{b| km/h}' 316 ].join('\n'),1)">317 318 319 fontSize: 10320 fontWeight: 800321 fontFamily: 'Arial'322 lineHeight: 22323 color: '#fff'324 align: 'left' 325 326 327 fontWeight: 600328 fontFamily: 'Arial'329 lineHeight: 22330 color: '#fff'331 align: 'left' 332 333 334 335 336 show: 337 width: 3338 339 color: '#fff' 340 341 342 343 344 value: 250345 name: '' 346 347 348 349 350 name: 'gauge 5'351 type: 'gauge'352 min: 0353 max: 1354 startAngle: 125355 endAngle: 55356 splitNumber: 2357 radius: '34%'358 center: ['79%','55.3%'359 360 361 width: 9362 363 [0.15,1)">364 [1,'rgba(255,1)">365 366 367 368 369 distance: -14370 length: 16371 372 color: '#fff'373 width: 4 374 375 376 377 distance: -14378 length: 10379 380 color: '#fff'381 width: 2 382 383 384 385 distance: 12386 fontSize: 10387 fontWeight: 800388 fontFamily: 'Arial'389 color: '#fff'390 formatter: (value) { 391 if (value === 0.5) { 392 return '2/4'; 393 394 if (value === 1395 return '4/4'396 397 return value + ''398 399 400 401 show: 402 width: 5403 404 color: '#fff' 405 406 407 anchor: { 408 show: 409 itemStyle: {},1)">410 offsetCenter: ['-22%','-57%'411 size: 18412 icon: 'path://M1.11979167,1.11111112 C1.11979167,0.497461393 1.61725306,0 2.23090279,0 L12.2309028,0 C12.8445525,1.43824153e-08 13.3420139,0.497461403 13.3420139,1.11111112 L13.3420139,10 L15.5642361,10 C16.7915356,10 17.7864583,10.9949228 17.7864583,12.2222222 L17.7864583,16.6666667 C17.7865523,17.28025 18.2839861,17.7776077 18.8975694,17.7776077 C19.5111527,17.7776077 20.0085866,17.28025 20.0086805,16.6666667 L20.0086805,8.88888888 L17.7864583,8.88888888 C17.1728086,8.88888888 16.6753472,8.3914275 16.6753472,7.77777779 L16.6753472,3.79333333 L15.6197917,2.73777777 C15.1859413,2.30392741 15.1859413,1.60051702 15.6197917,1.16666667 L15.6197917,1.16666667 C16.053642,0.732816318 16.7570524,0.732816318 17.1909028,1.16666667 L21.9053472,5.88111112 C22.1140468,6.08922811 22.2312072,6.37193273 22.2309028,6.66666667 L22.2309028,16.6666667 C22.2309028,18.5076158 20.7385186,20 18.8975695,20 C17.0566203,20 15.5642361,18.5076158 15.5642361,16.6666667 L15.5642361,12.2222222 L13.3420139,17.7777778 L13.3420139,17.7777778 C13.9556636,17.7777778 14.453125,18.2752392 14.453125,18.8888889 L14.453125,18.8888889 C14.453125,19.5025386 13.9556636,20 13.3420139,20 L1.11979165,20 C0.506141934,20 0.00868054688,19.5025386 0.00868054687,18.8888889 L0.00868054687,18.8888889 C0.00868054688,18.2752392 0.506141934,17.7777778 1.11979165,17.7777778 L1.11979167,1.11111112 Z M3.34201388,2.22222221 L3.34201388,8.88888888 L11.1197917,2.22222221 Z' 413 414 415 show: 416 417 418 419 offsetCenter: ['10%','-56%'420 formatter: '{a|831}{b| km}'421 422 423 fontSize: 15424 fontWeight: 800425 fontFamily: 'Arial'426 color: '#fff' 427 428 429 fontWeight: 600430 fontFamily: 'Arial'431 color: '#fff' 432 433 434 435 436 437 value: 0.85438 name: '' 439 440 441 442 443 name: 'gauge 6'444 type: 'gauge'445 min: -120446 max: -60447 startAngle: 230448 endAngle: 310449 clockwise: 450 splitNumber: 2451 radius: '35%'452 center: ['79%',1)">453 454 455 456 [1,1)">457 [1.1,1)">458 459 460 461 462 distance: -8463 length: 12464 465 color: '#fff'466 width: 4 467 468 469 470 splitNumber: 3471 length: 8472 distance: -8473 474 color: '#fff'475 width: 2 476 477 478 479 distance: 14480 fontSize: 10481 fontWeight: 800482 fontFamily: 'Arial'483 color: '#fff'484 formatter: 485 return -value + ''486 487 488 489 show: 490 491 offsetCenter: [0,1)">492 size: 20493 icon: 'path://M-34.1-1.1L-34.1-1.1c0-0.3-0.3-0.6-0.6-0.6h-3.6v-1.5c0-0.5-0.2-0.9-0.6-1.1s-0.9-0.2-1.3,0c-0.4,0.2-0.6,0.7-0.6,1.1V7.9c0,0.1c-0.8,0.5-1.2,1.5-0.9,2.5c0.3,0.9,1.1,1.6,2.1,1.6c1,1.8-0.6,2.1-1.5c0.3-0.9,0-1.9-0.8-2.5V6.3h3.5c0.4,0.7-0.3,0.7-0.7l0,0c0-0.4-0.3-0.7-0.7-0.7h-3.5V2.9h3.5c0.4,0c0-0.4-0.3-0.7-0.7-0.7h-3.5v-2.1h3.6C-34.4-0.5-34.1-0.8-34.1-1.1z M-44.9,11.6c-0.7,0-1.4-0.2-2-0.6c-0.4-0.3-0.9-0.4-1.4-0.4c-0.4,0-0.9,0.4c-0.4,0.2-1.4-0.9-0.9-1.3c0.6-0.4,1.3-0.6,2-0.7c0.8,1.5,0.2,2.2,0.5c0.4,0.3,1.3,0.4c0.6,1.1-0.2,1.5-0.6s1.6,0.7,1.3S-44,11.6-44.9,11.6L-44.9,11.6z M-34.3,0-1.4-0.3-2-0.7c-0.6-0.4,0.5-1.6,0.9-1.3s0.8,1.2,0.4c0.5,1-0.1,1.4-0.4c0.6-0.3,1.3-0.5,2-0.6h0c0.9,1.7,2.4,0.9c0.7,0.5-0.5,1.6-0.9,1.3c-0.4-0.3-1-0.6-1.5-0.6h0c-0.5,0.2-1.3,0.4c-0.6,0.3-1.3,0.5-2,0.6H-34.3z M-33.5,16.3c-0.7,0-1.4-0.3-1.9-0.8c-0.4-0.3-0.6-0.5-1-0.5c-0.4,0-0.7,0.2-1,0.5-1.3,0.7-2,0.7c-0.7,0-1.4-0.3-1.9-0.8c-0.2-0.3-0.6-0.4-0.9-0.4c-0.4,0.1-1.1,0.5c-0.6,0.7-2.1,0.7c-0.7-0.1-1.4-0.4-1.9-0.9c-0.4-0.3-0.6-0.5-1-0.5c-0.3,0-0.6,0.2-0.9,0.4s-1.6-0.7-1.1-1.2c0.5-0.5,1.2-0.8,1.9-0.9c1-0.1,0.8c0.3,0.5,0.6-0.1,1-0.4c0.6-0.5,1.4-0.8,2.1-0.8c0.7,1.4,1.9,0.8c0.2,0.4c0.4,1.3-0.7,2,0.9c0.4,0.4c0.3,0.7-0.2,1.1-0.5c0.5-0.4,1.2-0.9,2.3-0.8c0.7,0.7c0.5,0.4-0.7,1.5-1,1.3s-0.6-0.4-1-0.4c-0.4,0.5C-32,15.9-32.7,16.2-33.5,16.3L-33.5,16.3z' 494 495 496 icon: 'path://M2.9,0.7L2.9,0.7c1.4,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,2.9,0.7z'497 width: 15498 length: '4'499 offsetCenter: [0,'-90%'500 501 color: '#f00' 502 503 504 505 506 show: 507 508 509 510 value: -120511 name: '' 512 513 514 515 516 517 518 ec_right2_option && ec_right2.setOption(ec_right2_option);
中国地图
var echarts = require('echarts'); 2 const data = [ 3 { name: '海门',value: 9 4 { name: '鄂尔多斯',value: 12 5 { name: '招远',1)"> 6 { name: '舟山',1)"> 7 { name: '齐齐哈尔',value: 14 8 { name: '盐城',value: 15 9 { name: '赤峰',value: 16 10 { name: '青岛',value: 18 11 { name: '乳山',1)"> 12 { name: '金昌',value: 19 13 { name: '泉州',value: 21 14 { name: '莱西',1)"> 15 { name: '日照',1)"> 16 { name: '胶南',value: 22 17 { name: '南通',value: 23 18 { name: '拉萨',value: 24 19 { name: '云浮',1)"> 20 { name: '梅州',value: 25 21 { name: '文登',1)"> 22 { name: '上海',1)"> 23 { name: '攀枝花',1)"> 24 { name: '威海',1)"> 25 { name: '承德',1)"> 26 { name: '厦门',value: 26 27 { name: '汕尾',1)"> 28 { name: '潮州',1)"> 29 { name: '丹东',value: 27 30 { name: '太仓',1)"> 31 { name: '曲靖',1)"> 32 { name: '烟台',value: 28 33 { name: '福州',value: 29 34 { name: '瓦房店',value: 30 35 { name: '即墨',1)"> 36 { name: '抚顺',value: 31 37 { name: '玉溪',1)"> 38 { name: '张家口',1)"> 39 { name: '阳泉',1)"> 40 { name: '莱州',value: 32 41 { name: '湖州',1)"> 42 { name: '汕头',1)"> 43 { name: '昆山',value: 33 44 { name: '宁波',1)"> 45 { name: '湛江',1)"> 46 { name: '揭阳',value: 34 47 { name: '荣成',1)"> 48 { name: '连云港',value: 35 49 { name: '葫芦岛',1)"> 50 { name: '常熟',value: 36 51 { name: '东莞',1)"> 52 { name: '河源',1)"> 53 { name: '淮安',1)"> 54 { name: '泰州',1)"> 55 { name: '南宁',value: 37 56 { name: '营口',1)"> 57 { name: '惠州',1)"> 58 { name: '江阴',1)"> 59 { name: '蓬莱',1)"> 60 { name: '韶关',value: 38 61 { name: '嘉峪关',1)"> 62 { name: '广州',1)"> 63 { name: '延安',1)"> 64 { name: '太原',value: 39 65 { name: '清远',1)"> 66 { name: '中山',1)"> 67 { name: '昆明',1)"> 68 { name: '寿光',value: 40 69 { name: '盘锦',1)"> 70 { name: '长治',value: 41 71 { name: '深圳',1)"> 72 { name: '珠海',value: 42 73 { name: '宿迁',value: 43 74 { name: '咸阳',1)"> 75 { name: '铜川',value: 44 76 { name: '平度',1)"> 77 { name: '佛山',1)"> 78 { name: '海口',1)"> 79 { name: '江门',value: 45 80 { name: '章丘',1)"> 81 { name: '肇庆',value: 46 82 { name: '大连',value: 47 83 { name: '临汾',1)"> 84 { name: '吴江',1)"> 85 { name: '石嘴山',value: 49 86 { name: '沈阳',value: 50 87 { name: '苏州',1)"> 88 { name: '茂名',1)"> 89 { name: '嘉兴',value: 51 90 { name: '长春',1)"> 91 { name: '胶州',value: 52 92 { name: '银川',1)"> 93 { name: '张家港',1)"> 94 { name: '三门峡',value: 53 95 { name: '锦州',value: 54 96 { name: '南昌',1)"> 97 { name: '柳州',1)"> 98 { name: '三亚',1)"> 99 { name: '自贡',value: 56100 { name: '吉林',1)">101 { name: '阳江',value: 57102 { name: '泸州',1)">103 { name: '西宁',1)">104 { name: '宜宾',value: 58105 { name: '呼和浩特',1)">106 { name: '成都',1)">107 { name: '大同',1)">108 { name: '镇江',value: 59109 { name: '桂林',1)">110 { name: '张家界',1)">111 { name: '宜兴',1)">112 { name: '北海',value: 60113 { name: '西安',value: 61114 { name: '金坛',value: 62115 { name: '东营',1)">116 { name: '牡丹江',value: 63117 { name: '遵义',1)">118 { name: '绍兴',1)">119 { name: '扬州',value: 64120 { name: '常州',1)">121 { name: '潍坊',value: 65122 { name: '重庆',value: 66123 { name: '台州',value: 67124 { name: '南京',1)">125 { name: '滨州',value: 70126 { name: '贵阳',value: 71127 { name: '无锡',1)">128 { name: '本溪',1)">129 { name: '克拉玛依',value: 72130 { name: '渭南',1)">131 { name: '马鞍山',1)">132 { name: '宝鸡',1)">133 { name: '焦作',value: 75134 { name: '句容',1)">135 { name: '北京',value: 79136 { name: '徐州',1)">137 { name: '衡水',value: 80138 { name: '包头',1)">139 { name: '绵阳',1)">140 { name: '乌鲁木齐',value: 84141 { name: '枣庄',1)">142 { name: '杭州',1)">143 { name: '淄博',value: 85144 { name: '鞍山',value: 86145 { name: '溧阳',1)">146 { name: '库尔勒',1)">147 { name: '安阳',value: 90148 { name: '开封',1)">149 { name: '济南',value: 92150 { name: '德阳',value: 93151 { name: '温州',value: 95152 { name: '九江',value: 96153 { name: '邯郸',value: 98154 { name: '临安',value: 99155 { name: '兰州',1)">156 { name: '沧州',value: 100157 { name: '临沂',value: 103158 { name: '南充',value: 104159 { name: '天津',value: 105160 { name: '富阳',value: 106161 { name: '泰安',value: 112162 { name: '诸暨',1)">163 { name: '郑州',value: 113164 { name: '哈尔滨',value: 114165 { name: '聊城',value: 116166 { name: '芜湖',value: 117167 { name: '唐山',value: 119168 { name: '平顶山',1)">169 { name: '邢台',1)">170 { name: '德州',value: 120171 { name: '济宁',1)">172 { name: '荆州',value: 127173 { name: '宜昌',value: 130174 { name: '义乌',value: 132175 { name: '丽水',value: 133176 { name: '洛阳',value: 134177 { name: '秦皇岛',value: 136178 { name: '株洲',value: 143179 { name: '石家庄',value: 147180 { name: '莱芜',value: 148181 { name: '常德',value: 152182 { name: '保定',value: 153183 { name: '湘潭',value: 154184 { name: '金华',value: 157185 { name: '岳阳',value: 169186 { name: '长沙',value: 175187 { name: '衢州',value: 177188 { name: '廊坊',value: 193189 { name: '菏泽',value: 194190 { name: '合肥',value: 229191 { name: '武汉',value: 273192 { name: '大庆',value: 279 } 193 ]; 194 const geoCoordMap =195 海门: [121.15,31.89196 鄂尔多斯: [109.781327,39.608266197 招远: [120.38,37.35198 舟山: [122.207216,29.985295199 齐齐哈尔: [123.97,47.33200 盐城: [120.13,33.38201 赤峰: [118.87,42.28202 青岛: [120.33,36.07203 乳山: [121.52,36.89204 金昌: [102.188043,38.520089205 泉州: [118.58,24.93206 莱西: [120.53,36.86207 日照: [119.46,35.42208 胶南: [119.97,35.88209 南通: [121.05,32.08210 拉萨: [91.11,29.97211 云浮: [112.02,22.93212 梅州: [116.1,24.55213 文登: [122.05,37.2214 上海: [121.48,31.22215 攀枝花: [101.718637,26.582347216 威海: [122.1,37.5217 承德: [117.93,40.97218 厦门: [118.1,24.46219 汕尾: [115.375279,22.786211220 潮州: [116.63,23.68221 丹东: [124.37,40.13222 太仓: [121.1,31.45223 曲靖: [103.79,25.51224 烟台: [121.39,37.52225 福州: [119.3,26.08226 瓦房店: [121.979603,39.627114227 即墨: [120.45,36.38228 抚顺: [123.97,41.97229 玉溪: [102.52,24.35230 张家口: [114.87,40.82231 阳泉: [113.57,37.85232 莱州: [119.942327,37.177017233 湖州: [120.1,30.86234 汕头: [116.69,23.39235 昆山: [120.95,31.39236 宁波: [121.56,29.86237 湛江: [110.359377,21.270708238 揭阳: [116.35,23.55239 荣成: [122.41,37.16240 连云港: [119.16,34.59241 葫芦岛: [120.836932,40.711052242 常熟: [120.74,31.64243 东莞: [113.75,23.04244 河源: [114.68,23.73245 淮安: [119.15,33.5246 泰州: [119.9,32.49247 南宁: [108.33,22.84248 营口: [122.18,40.65249 惠州: [114.4,23.09250 江阴: [120.26,31.91251 蓬莱: [120.75,37.8252 韶关: [113.62,24.84253 嘉峪关: [98.289152,39.77313254 广州: [113.23,23.16255 延安: [109.47,36.6256 太原: [112.53,37.87257 清远: [113.01,23.7258 中山: [113.38,22.52259 昆明: [102.73,25.04260 寿光: [118.73,1)">261 盘锦: [122.070714,41.119997262 长治: [113.08,36.18263 深圳: [114.07,22.62264 珠海: [113.52,22.3265 宿迁: [118.3,33.96266 咸阳: [108.72,34.36267 铜川: [109.11,35.09268 平度: [119.97,36.77269 佛山: [113.11,23.05270 海口: [110.35,20.02271 江门: [113.06,22.61272 章丘: [117.53,36.72273 肇庆: [112.44,1)">274 大连: [121.62,38.92275 临汾: [111.5,36.08276 吴江: [120.63,31.16277 石嘴山: [106.39,39.04278 沈阳: [123.38,41.8279 苏州: [120.62,31.32280 茂名: [110.88,21.68281 嘉兴: [120.76,30.77282 长春: [125.35,43.88283 胶州: [120.03336,36.264622284 银川: [106.27,38.47285 张家港: [120.555821,31.875428286 三门峡: [111.19,34.76287 锦州: [121.15,41.13288 南昌: [115.89,28.68289 柳州: [109.4,24.33290 三亚: [109.511909,18.252847291 自贡: [104.778442,29.33903292 吉林: [126.57,43.87293 阳江: [111.95,21.85294 泸州: [105.39,28.91295 西宁: [101.74,36.56296 宜宾: [104.56,29.77297 呼和浩特: [111.65,1)">298 成都: [104.06,30.67299 大同: [113.3,40.12300 镇江: [119.44,32.2301 桂林: [110.28,25.29302 张家界: [110.479191,29.117096303 宜兴: [119.82,31.36304 北海: [109.12,21.49305 西安: [108.95,34.27306 金坛: [119.56,31.74307 东营: [118.49,37.46308 牡丹江: [129.58,44.6309 遵义: [106.9,27.7310 绍兴: [120.58,30.01311 扬州: [119.42,32.39312 常州: [119.95,31.79313 潍坊: [119.1,36.62314 重庆: [106.54,29.59315 台州: [121.420757,28.656386316 南京: [118.78,32.04317 滨州: [118.03,37.36318 贵阳: [106.71,26.57319 无锡: [120.29,31.59320 本溪: [123.73,41.3321 克拉玛依: [84.77,45.59322 渭南: [109.5,34.52323 马鞍山: [118.48,31.56324 宝鸡: [107.15,34.38325 焦作: [113.21,35.24326 句容: [119.16,31.95327 北京: [116.46,39.92328 徐州: [117.2,34.26329 衡水: [115.72,37.72330 包头: [110,40.58331 绵阳: [104.73,31.48332 乌鲁木齐: [87.68,43.77333 枣庄: [117.57,34.86334 杭州: [120.19,30.26335 淄博: [118.05,36.78336 鞍山: [122.85,41.12337 溧阳: [119.48,31.43338 库尔勒: [86.06,41.68339 安阳: [114.35,36.1340 开封: [114.35,34.79341 济南: [117,36.65342 德阳: [104.37,31.13343 温州: [120.65,28.01344 九江: [115.97,29.71345 邯郸: [114.47,1)">346 临安: [119.72,30.23347 兰州: [103.73,36.03348 沧州: [116.83,38.33349 临沂: [118.35,35.05350 南充: [106.110698,30.837793351 天津: [117.2,39.13352 富阳: [119.95,30.07353 泰安: [117.13,1)">354 诸暨: [120.23,1)">355 郑州: [113.65,1)">356 哈尔滨: [126.63,45.75357 聊城: [115.97,36.45358 芜湖: [118.38,31.33359 唐山: [118.02,39.63360 平顶山: [113.29,33.75361 邢台: [114.48,37.05362 德州: [116.29,37.45363 济宁: [116.59,35.38364 荆州: [112.239741,30.335165365 宜昌: [111.3,30.7366 义乌: [120.06,29.32367 丽水: [119.92,28.45368 洛阳: [112.44,34.7369 秦皇岛: [119.57,39.95370 株洲: [113.16,27.83371 石家庄: [114.48,38.03372 莱芜: [117.67,36.19373 常德: [111.69,29.05374 保定: [115.48,38.85375 湘潭: [112.91,27.87376 金华: [119.64,29.12377 岳阳: [113.09,29.37378 长沙: [113,28.21379 衢州: [118.88,28.97380 廊坊: [116.7,39.53381 菏泽: [115.480656,35.23375382 合肥: [117.27,31.86383 武汉: [114.31,30.52384 大庆: [125.03,46.58385 386 const convertData = 387 var res = []; 388 for (var i = 0; i < data.length; i++389 var geoCoord = geoCoordMap[data[i].name]; 390 if (geoCoord) { 391 res.push({ 392 name: data[i].name,1)"> value: geoCoord.concat(data[i].value) 394 }); 395 } 397 return res; 399 const ec_center_option =400 title: { 401 text: '全国主要城市空气质量 - 百度地图',1)">402 subtext: 'data from PM25.in',1)">403 sublink: 'http://www.pm25.in',1)">404 left: 'center' 405 407 trigger: 'item' 408 bmap: { 410 center: [104.114129,37.550339411 zoom: 5412 roam: mapStyle: { styleJson: [ 415 416 featureType: 'water'417 elementType: 'all' stylers: { 419 color: '#d1d1d1' 420 },1)">423 featureType: 'land'424 elementType: 'all'425 426 color: '#f3f3f3' 429 430 featureType: 'railway'431 elementType: 'all'433 visibility: 'off' 437 featureType: 'highway'438 elementType: 'all'440 color: '#fdfdfd' 443 444 featureType: 'highway'445 elementType: 'labels'446 447 visibility: 'on' 448 449 450 451 featureType: 'arterial'452 elementType: 'geometry'454 color: '#fefefe' 456 457 458 featureType: 'arterial'459 elementType: 'geometry.fill'461 color: '#fefefe' 462 463 465 featureType: 'poi'466 elementType: 'all'468 visibility: 'off' 470 471 472 featureType: 'green'473 elementType: 'all'474 475 visibility: 'off' 479 featureType: 'subway'480 elementType: 'all'481 482 visibility: 'off' 483 484 485 486 featureType: 'manmade'487 elementType: 'all'489 color: '#d1d1d1' 491 492 493 featureType: 'local'494 elementType: 'all'496 color: '#d1d1d1' 497 498 499 500 featureType: 'arterial'501 elementType: 'labels'503 visibility: 'off' 506 507 featureType: 'boundary'508 elementType: 'all'510 color: '#fefefe' 511 514 featureType: 'building'515 elementType: 'all'517 color: '#d1d1d1' 518 519 520 521 featureType: 'label'522 elementType: 'labels.text.fill'523 524 color: '#999999' 525 526 527 528 529 530 531 532 name: 'pm2.5'533 type: 'scatter'534 coordinateSystem: 'bmap'535 data: convertData(data),1)">536 symbolSize: (val) { 537 return val[2] / 10538 539 encode: { 540 value: 2 541 542 label: { 543 formatter: '{b}'544 position: 'right'545 show: 546 547 emphasis: { 548 label: { 549 show: 550 551 552 553 554 name: 'Top 5'555 type: 'effectScatter'556 coordinateSystem: 'bmap'557 data: convertData( 558 data 559 .sort( (a,b) { 560 return b.value - a.value; 561 }) 562 .slice(0,6563 ),1)">564 symbolSize: 565 566 567 568 value: 2 569 570 showEffectOn: 'render'571 rippleEffect: { 572 brushType: 'stroke' 573 574 575 formatter: '{b}'576 position: 'right'577 show: 578 579 itemStyle: { 580 shadowBlur: 10581 shadowColor: '#333' 582 583 584 scale: 585 586 zlevel: 1 587 588 589 590 基于准备好的dom，初始化echarts实例 591 var ec_center = echarts.init(document.getElementById('center2'),1)">592 ec_center_option&&ec_center.setOption(ec_center_option);
页面整体调用
7 script src="../static/js/jquery-3.6.0.js"script 8 ="../static/js/echarts.min.js" 9 type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@3.6.0/map/js/china.js"="https://cdn.jsdelivr.net/npm/echarts@3.6.0/map/js/world.js"11 ="../static/js/bmap.min.js"="https://api.map.baidu.com/api?v=2.0&ak=你的ak"="../static/js/dark.js"14 ="text/javascript"15 function16 var cur_time = new17 str_time = cur_time.getFullYear() + "年" + ((cur_time.getMonth() 1) > 9 ? (cur_time.getMonth() ) : 0)) 月 (cur_time.getDate() cur_time.getDate() : cur_time.getDate()) 日 (cur_time.getHours() cur_time.getHours() : cur_time.getHours()) : (cur_time.getMinutes() cur_time.getMinutes() : cur_time.getMinutes()) (cur_time.getSeconds() cur_time.getSeconds() : 18 $(.time19 21 22 23 url: /get_c1_data24 type: post25 success: 26 $(.num).eq(27 28 229 330 31 32 error: 33 34 35 36 37 38 $(document).ready(39 40 41 setInterval(get_time,100042 setInterval(get_c1_data,1)">43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 ="../static/js/ec_center.js" type76 ="../static/js/ec_left1.js"77 ="../static/js/ec_left2.js"78 ="../static/js/ec_right1.js"79 ="../static/js/ec_right2.js"80 81 >
备注
本文主要是记录学习，抛转引玉。与大家一起进步。
城南【作者】曾巩
雨过横塘水满堤，乱山高下路东西。
一番桃李花开尽，惟有青青草色齐。
一番桃李花开尽，惟有青青草色齐。
