Python基础之数字化大屏

编程之家收集整理的这篇文章主要介绍了Python基础之数字化大屏编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在公司内部或前台,有时需要展示数字化看板,展示公司的业务信息。看着别的公司展示的炫酷的数字化大屏,是否很羡慕?本文以Python+flask+jquery+eCharts,简述如何开发数字化大屏进行数据展示,仅供学习分享使用,如有不足之处,还请指正。

涉及知识点

示例效果

在本例中,主要展示某公司的产品累计趋势,产品新增趋势,销售柱状图,地图内容包括数字,图表等方式,具体如下所示:

 

页面设计

为了数据展示,将数字化大屏页面分为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=[getcolor: rgba(128,post])
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);
VIEw Code

中国地图

 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);
VIEw Code

页面整体调用

 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 >
VIEw Code

源码链接

备注

本文主要是记录学习,抛转引玉。与大家一起进步。

城南【作者】曾巩 【朝代】宋

雨过横塘水满堤,乱山高下路东西。
一番桃李花开尽,惟有青青草色齐。

@H_325_3301@

解锁查看全部内容

付费后查看完整内容
限时 微信扫码支付 ¥9.9 19.9

总结

以上是编程之家为你收集整理的Python基础之数字化大屏全部内容,希望文章能够帮你解决Python基础之数字化大屏所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

Python相关文章

在程序员职场上,什么样的人最让人反感呢?
作为数据分析师,我们需要经常制作统计分析图表。但是报表太多的时候往往需要花费我们大部分时间去制作报表。这耽误了我们利用大量的时间去进行数据分析。但是作为数据分析师我们应该尽可能去挖掘表格图表数据背后隐藏关联信息,而不是简单的统计表格制作图表再发送报表。既然报表的工作不可免除,那我们应该如何利用我们所学的技术去更好的处理工作呢?这就需要我们制作一个Python小程序让它自己去实现,这样我们就有更多的时间去做数据分析。我们把让程序自己运行的这个过程称为自动化。自动化总是能够很好的节省时间,提高我们的工作效率。让
一、爬虫概述 1. 为什么要学习爬虫? 2. 爬虫与Python 3. 爬虫合法吗? 4. 爬虫的矛与盾 5. 爬虫原理图 and 流程图二、相关技术介绍 1. HTML 与 CSS 2. URL网址解释 3. HTTP 与 HTTРS (1)常见请求方式 (2)常见请求头 (3)常见请求状态码 4. Chrome浏览器分析网站 5. Session与Cookie ...
一、桌面宠物素材1.1 需要准备什么素材桌面宠物的各种动画效果,可以看作是由一个个GIF动图拼接而成,我们需要准备多组GIF动图来实现桌面宠物的动作切换。最好选取是白底的GIF动图。1.2 介绍几种获得GIF白底动图的方式1.2.1 通过pr实现视频转GIFpr在导出的时候选择动画GIF可以直接导出GIF动图。当然了想要白底就需要自已用“蒙版”和画笔工具自己抠图了。1.2.2 通过ps实现图片组转GIFps会高级一点,首先点击最上方的窗口,再点击时间轴,在时间
2、随机密码验证题目描述:代码如下:3、信息分配表(字典)题目描述:代码如下:4、全模式分词(jieba)题目描述:代码如下:5、数字金字塔题目描述:6、求最大值、最小值及平均值题目描述:代码如下:7、交换变量题目描述:代码如下:或或8、输入密码-三次机会题目描述:代码如下:9、水仙花数题目描述:代码如下:或或或10、增加与去掉题目描述:代码如下:11、添加通讯录信息题目
睿智的目标检测56——Pytorch搭建YoloV5目标检测平台学习前言源码下载YoloV5改进的部分(不完全)YoloV5实现思路一、整体结构解析二、网络结构解析1、主干网络Backbone介绍2、构建FPN特征金字塔进行加强特征提取3、利用Yolo Head获得预测结果三、预测结果的解码1、获得预测框与得分2、得分筛选与非极大抑制四、训练部分1、计算loss所需内容2、正样本的匹配过程a、匹配先验框b、匹配特征点3、计算Loss训练自己的YoloV5模型一、数据集的准备二、数据集的处理三、开始网络训练四
事情是这样的:昨天晚上,女朋友让我十二点催她睡觉。不过,可是我实在太困了,熬不下去…… 是吧?女朋友哪有睡觉重要?但,女朋友的命令,我是不敢违抗的……但是睡觉也不能缺!这时候我们该怎么办呢?是时候让Python登场了!喜欢记得收藏、关注、点赞。完整版代码,文末获取Python登场这次我们来做一个自动发送微信的程序,在深夜十二点的时候给女朋友发去消息,也算是尽了一个男朋友的义务了。安装和导入我们需要两个模块:apscheduler,pyautogui快捷键 Windows+r 打开运
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注