devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【11】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 销售指标大屏_echarts大屏网店销售

作者：IT小白 | 2024-04-12 03:22:43

赞

踩

echarts大屏网店销售

目录

精彩案例汇总

效果展示

1、首先看动态效果图 

2、再看实时分片数据图

3、丰富的主题样式

一、 确定需求方案

1、确定产品上线部署的屏幕LED分辨率

2、功能模块

3、部署方式 

二、整体架构设计

三、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）

1、前端html代码 

2、前端JS代码

产品销量分析

 利润目标达成率

3、后端python代码

四、上线运行

五、源码下载

精彩案例汇总

近年来，数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。今天为大家分享的是 【 销售指标 - 数据可视化大屏解决方案】。

之前小伙伴们建议我出一些视频课程来学习Echarts，这样可以更快上手，所以我就追星赶月的录制了精彩案例汇总 ，希望小伙伴们多多支持。 

话不多说，开始分享干货，欢迎讨论！QQ微信同号： 6550523

精彩案例汇总

YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客

效果展示

1、首先看动态效果图 

2、再看实时分片数据图

3、丰富的主题样式

  

一、 确定需求方案

1、确定产品上线部署的屏幕LED分辨率

1280px*768px，F11全屏后占满整屏无滚动条；其它分辨率屏幕可自适应显示。

2、功能模块

  • 销量目标达成率

  • 利润目标达成率

  • 产品销量分析

  • 門店TOP

  • 3D 地图 总销量

  • 合同目标达成率

  • 成本目标达成率

  • 成本分析

  • 门店数量

3、部署方式 

  • 基于免安装可执行程序：支持Windows、Linux、Mac等各种主流操作系统；将可执行程序exe复制到服务器上即可，无需其它环境依赖；
  • 观看方式：既可在服务器上直接观看程序界面，也可远程使用浏览器打开播放，支持Chrome浏览器、360浏览器等主流浏览器。

二、整体架构设计

  1. 前端基于Echarts开源库设计，使用WebStorm编辑器；
  2. 后端基于Python Web实现，使用Pycharm编辑器；
  3. 数据传输格式：JSON；
  4. 数据源类型：目前已支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等，还可以定制HTTP API接口方式或其它类型数据库。
  5. 数据更新方式：摒弃了前端页面定时拉取的方式（这种方式带来严重的资源浪费），采用后端数据实时更新，实时推送到前端展示；

三、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）

1、前端html代码 

  1.  
  2. <body background="/myimg/starfield.jpg" style="color: rgb(230, 171, 84);">
  3.  
  4.       <div class="container_fluid">
  5.             <div class="row_fluid" id="vue_app">
  6.                   <div style="padding:0 0" class="col-xs-12 col-md-12">
  7.                         <dv-decoration-1 style="height:4%;">
  8.                         </dv-decoration-1>
  9.                         <h3 id="container_h"></h3>
  10.                   </div>
  11.  
  12.                   <div style="padding:0 0" class="col-xs-12 col-md-3">
  13.                         <dv-border-box-1 style="height:29%;padding:0 0">
  14.                               <div style="height:100%;padding:5% 5% 5% 5%;" id="container_0_0"
  15.                                     class="col-xs-12 col-md-6"></div>
  16.                               <div style="height:100%;padding:5% 5% 5% 5%; " id="container_0_1"
  17.                                     class="col-xs-12 col-md-6"></div>
  18.                         </dv-border-box-1>
  19.  
  20.                         <dv-border-box-1 style="height:29%;padding:0 0">
  21.                               <div style="height:100%;padding:5% 5% 5% 5%;" id="container_1"
  22.                                     class="col-xs-12 col-md-12"></div>
  23.                         </dv-border-box-1>
  24.  
  25.                         <dv-border-box-1 style="height:29%;padding:0 0">
  26.                               <div style="height:100%;padding:5% 5% 5% 5%;" id="container_2"
  27.                                     class="col-xs-12 col-md-12"></div>
  28.                         </dv-border-box-1>
  29.                   </div>
  30.  
  31.                   <div style="padding:0 0" class="col-xs-12 col-md-6">
  32.                         <dv-border-box-1 style="height:87%;padding:0 0" class="col-xs-12 col-md-12">
  33.                               <div style="height:100%;padding: 2% 2% 2% 2%" id="container_3"></div>
  34.  
  35.                               <div style="position: absolute; z-index: 2; left:25%; top:10%; right: 25%; bottom: 20%; height:20%; width: 50%;  ">
  36.                                     <h3 id="container_3_top_title"> </h3>
  37.                                     <h1 id="container_3_top"></h1>
  38.                               </div>
  39.  
  40.                         </dv-border-box-1>
  41.                   </div>
  42.  
  43.                   <div style="padding:0 0" class="col-xs-12 col-md-3">
  44.                         <dv-border-box-1 style="height:29%;padding:0 0">
  45.                               <div style="height:100%;padding:5% 5% 5% 5%;" id="container_4_0"
  46.                                     class="col-xs-12 col-md-6"></div>
  47.                               <div style="height:100%;padding:5% 5% 5% 5%; " id="container_4_1"
  48.                                     class="col-xs-12 col-md-6"></div>
  49.                         </dv-border-box-1>
  50.  
  51.                         <dv-border-box-1 style="height:29%;padding:0 0" class="col-xs-12 col-md-12">
  52.                               <div style="height:100%;padding:5% 5% 5% 5%;" id="container_5"></div>
  53.                         </dv-border-box-1>
  54.  
  55.                         <dv-border-box-1 style="height:29%;padding:0 0" class="col-xs-12 col-md-12">
  56.                               <div style="height:100%;padding:5% 5% 5% 5%;" id="container_6"></div>
  57.                         </dv-border-box-1>
  58.                   </div>
  59.  
  60.             </div>
  61.       </div>
  62. </body>

2、前端JS代码

产品销量分析

  1. // import * as echarts from 'echarts';
  2. var idContainer_1 = "container_1";
  3. var chartDom = document.getElementById(idContainer_1);
  4.  
  5. function initEchart_1(){
  6.   var myChart = echarts.init(chartDom, window.gTheme);
  7.   var option = {
  8.     title: {
  9.       text: "产品销量分析",
  10.       left: "left",
  11.       textStyle: {
  12.         color: "#3690be",
  13.         fontSize: "10",
  14.       },
  15.     },
  16.     tooltip: {
  17.       trigger: "item",
  18.       formatter: "{a} <br/>{b}: {c} 百万",
  19.       position: function (p) {
  20.         //其中p为当前鼠标的位置
  21.         return [p[0] + 10, p[1] - 10];
  22.       },
  23.     },
  24.     legend: {
  25.       data: ["成本", "利润"],
  26.       textStyle: {
  27.           color: "rgba(255,255,255,.5)",
  28.           fontSize: "10",
  29.       },
  30.       // 距离顶部边框的相对距离，太近压到了title
  31.       top: "10%",
  32.       // orient:"vertical"
  33.     },
  34.     grid: {
  35.       left: "3%",
  36.       right: "4%",
  37.       bottom: "3%",
  38.       // 距离顶部边框的相对距离，太近压到了legend
  39.       top: "30%",
  40.       containLabel: true,
  41.     },
  42.     xAxis: {
  43.       name: '百万',
  44.       type: "value",
  45.       axisLabel: {
  46.         textStyle: {
  47.           color: "rgba(255,255,255,.5)",
  48.           fontSize: 10,
  49.         },
  50.       },
  51.       axisLine: {
  52.         lineStyle: {
  53.           color: "rgba(255,255,255,.2)",
  54.         },
  55.       },
  56.       splitLine: {
  57.         lineStyle: {
  58.           color: "rgba(255,255,255,.1)",
  59.         },
  60.       },
  61.     },
  62.     yAxis: {
  63.       type: "category",
  64.       data: ["Mate", "P", "Nova", "畅享"],
  65.       axisLabel: {
  66.         textStyle: {
  67.           color: "rgba(255,255,255,.5)",
  68.           fontSize: 10,
  69.         },
  70.       },
  71.       axisLine: {
  72.         lineStyle: {
  73.           color: "rgba(255,255,255,.2)",
  74.         },
  75.       },
  76.       splitLine: {
  77.         lineStyle: {
  78.           color: "rgba(255,255,255,.1)",
  79.         },
  80.       },
  81.     },
  82.     series: [
  83.       {
  84.         name: "成本",
  85.         type: "bar",
  86.         stack: "total",
  87.         label: {
  88.           show: true,
  89.         },
  90.         emphasis: {
  91.           focus: "series",
  92.         },
  93.         data: [334, 390, 330, 320],
  94.       },
  95.       {
  96.         name: "利润",
  97.         type: "bar",
  98.         stack: "total",
  99.         label: {
  100.           show: true,
  101.         },
  102.         emphasis: {
  103.           focus: "series",
  104.         },
  105.         data: [134, 90, 230, 210],
  106.       },
  107.     ],
  108.   };
  109.  
  110.     // 使用刚指定的配置项和数据显示图表。
  111.     myChart.setOption(option);
  112.     window.addEventListener("resize", function () {
  113.       myChart.resize();
  114.     });
  115. }
  116.  
  117.  
  118. function asyncData_1() {
  119.   $.getJSON("json/bar_stacked.json").done(function (data) {
  120.     var myChart = echarts.init(document.getElementById(idContainer_1));
  121.  
  122.     myChart.setOption({
  123.       series: [{ data: data }],
  124.     });
  125.   }); //end $.getJSON}
  126. }
  127. initEchart_1();
  128. asyncData_1();
  129.

 利润目标达成率

  1. var idContainer_0_1 = 'container_0_1'
  2. var chartDom_0_1 = document.getElementById(idContainer_0_1);
  3.  
  4. function initEchart_0_1() {
  5.  
  6.     var myChart = echarts.init(chartDom_0_1, window.gTheme);
  7.     var option = {
  8.         title: {
  9.             text: '利润目标达成率',
  10.             left: 'left',
  11.             textStyle: {
  12.                 color: '#3690be',
  13.                 fontSize: '10'
  14.             }
  15.         },
  16.         series: [{
  17.             type: 'gauge',
  18.             progress: {
  19.                 show: true,
  20.                 width: 12
  21.             },
  22.             axisLine: {
  23.                 lineStyle: {
  24.                     width: 12
  25.                 }
  26.             },
  27.             axisTick: {
  28.                 show: false,
  29.             },
  30.             splitLine: {
  31.                 show: false,
  32.             },
  33.             axisLabel: {
  34.                 show: false,
  35.             },
  36.             pointer:{
  37.                 show: false,
  38.             },
  39.             anchor:{
  40.                 show: false,
  41.             },
  42.             title:{
  43.                 show: false,
  44.             },
  45.             detail: {
  46.                 valueAnimation: true,
  47.                 offsetCenter: [0, 0],
  48.                 formatter: '{value}%',
  49.             },
  50.             data: []
  51.         }]
  52.     };
  53.      // 使用刚指定的配置项和数据显示图表。
  54.      myChart.setOption(option);
  55.      window.addEventListener("resize", function () {
  56.          myChart.resize();
  57.      });
  58. }
  59.  
  60. function asyncData_0_1() {
  61.     $.getJSON('json/gauge_benefit_rate.json').done(function (data) {
  62.         var myChart = echarts.init(document.getElementById(idContainer_0_1));
  63.  
  64.         myChart.setOption({
  65.             series: [{ data: data }],
  66.         });
  67.     });//end $.getJSON}
  68. }
  69. initEchart_0_1();
  70. asyncData_0_1();

3、后端python代码

  1. # -*- coding:utf-8 -*-
  2.  
  3. import io
  4. import os
  5. import sys
  6. import urllib
  7. import json
  8. from http.server import HTTPServer, SimpleHTTPRequestHandler, ThreadingHTTPServer
  9.  
  10. ip = "localhost"   # 监听IP，配置项
  11. port = 8811       # 监听端口，配置项
  12. index_url = "http://%s:%d/index.html" %(ip, port)  # 监听主页url，配置项
  13.  
  14. class MyRequestHandler(SimpleHTTPRequestHandler):
  15.     protocol_version = "HTTP/1.0"
  16.     server_version = "PSHS/0.1"
  17.     sys_version = "Python/3.7.x"
  18.     target = "./"  # 监听目录，配置项
  19.  
  20.     def do_GET(self):
  21.         if self.path.find("/json/") > 0:
  22.             print(self.path)
  23.             req = {"success": "true"}
  24.             self.send_response(200)
  25.             self.send_header("Content-type", "json")
  26.             self.end_headers()
  27.             with open(self.path, 'r', encoding="utf-8") as f:
  28.                 data = json.load(f)
  29.                 rspstr = json.dumps(data)
  30.                 self.wfile.write(rspstr.encode("utf-8"))
  31.  
  32.         else:
  33.             SimpleHTTPRequestHandler.do_GET(self);
  34.  
  35.     def do_POST(self):
  36.         if self.path == "/signin":
  37.             print("postmsg recv, path right")
  38.         else:
  39.             print("postmsg recv, path error")
  40.             data = self.rfile.read(int(self.headers["content-length"]))
  41.             data = json.loads(data)
  42.             self.send_response(200)
  43.             self.send_header("Content-type", "text/html")
  44.             self.end_headers()
  45.             rspstr = "recv ok, data = "
  46.             rspstr += json.dumps(data, ensure_ascii=False)
  47.             self.wfile.write(rspstr.encode("utf-8"))
  48.  
  49.  
  50. def HttpServer():
  51.     try:
  52.         server = HTTPServer((ip, port), MyRequestHandler)
  53.         listen = "http://%s:%d" %(ip, port)
  54.         print("服务器监听地址： ", listen)
  55.         server.serve_forever()
  56.     except ValueError as e:
  57.         print("Exception", e)
  58.         server.socket.close()
  59.  
  60. if __name__ == "__main__":
  61.     HttpServer()

四、上线运行

五、源码下载

11【源码】数据可视化：基于Echarts+Python实现的动态实时大屏范例-销售指标.zip-企业管理文档类资源-CSDN下载

精彩案例汇总

YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客

本次分享结束，欢迎讨论！QQ微信同号： 6550523

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/408938
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号