数据可视化：基于 Echarts + Python 实现的动态实时大屏范例五

近年来，数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。今天为大家分享的是 【互联网热点分析案例】。

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

首先看动态效果图 ：

再看实时分片数据图：

 

一、 确定需求方案

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

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

2、功能模块

• 1  水球图
• 2  烟花图
• 3  关系图
• 4  中国地图，热力图，飞线图
• 5 大数据词云图

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代码 

   
   
   
   	
   		
   	    
   	    
   		
   		
   		
   	
   	
   	
   		
   
   			
   互联网热点分析案例
   		
   		
   		
   
   			
   
   				
   
   					
   
   						
   
   							
   
   								
   
   							
   						
   						
   
   							
   
   								
   
   							
   						
   					
   
   					
   
   						
   
   
   							
    
   日成交额突破
    
    3912410
   							
    
   总收益突破
    
   222224444
    
   						
   						
   
   							
   
   								
   
   							
   						
   					
   					
   
   						
   
   							
   
   								
   
   							
   						
   						
   
   							
   
   								
   
   							
   						
   					
   				
   			
   		
   		
   		
   		
   		
   		
   		
   		
   		
   
   	
   

    

2. 前端JS代码

   
   var jsonFileNameWordCloud = "/json/wordCloud.json"
   var idWordCloud = "wordChart"
   function async_chart_wordCloud() {
   
       // 异步加载数据
       $.getJSON(jsonFileNameWordCloud).done(function (data) {
           var element = document.getElementById(idWordCloud);
           console.log("async_chart_wordCloud", element, jsonFileNameWordCloud)
           var myChart = echarts.init(element);
           console.log(data)
           myChart.setOption({
               series: [{
                   data: data
               }]
           });
       });//end $.getJSON
   }
   
   var relationChartjsonFileName = "/json/relationChart.json"
   var relationChartId = "relationChart"
   function async_chart_relationChart() {
   
       // 异步加载数据
       $.getJSON(relationChartjsonFileName).done(function (data) {
           var element = document.getElementById(relationChartId);
           console.log("async_chart_wordCloud", element, relationChartjsonFileName)
           var myChart = echarts.init(element);
           console.log(data)
           myChart.setOption({
               series: [{
                   categories: data["categories"],
                   links: data["links"],
                   data: data["data"]
               }]
           });
       });//end $.getJSON
   }
   
   var mapChartjsonFileNameEffectScatter = "/json/chart_map_effectScatter.json"
   var mapChartjsonFileNameLines = "/json/chart_map_lines.json"
   var mapChartId = "mapChart"
   
   function async_data_chart_map() {
       // 异步加载数据
       $.getJSON(mapChartjsonFileNameEffectScatter).done(function (data_effectScatter) {
           $.getJSON(mapChartjsonFileNameLines).done(function (data_lines) {
               var myChart = echarts.init(document.getElementById(mapChartId));
   
               ret = myChart.setOption({
                   series: [{
                       name: data_lines["name"],
                       data: data_lines["data"]
                   }, {
                       name: data_effectScatter["name"],
                       data: data_effectScatter["data"]
                   }]
               });
           });//end $.getJSON
       });//end $.getJSON
   }
   
   function async_data_common() {
       $.getJSON('json/common.json').done(function (data) {
           document.getElementById('total_pv').innerText = data["total_pv"]
           document.getElementById('total_income').innerText = data["total_income"]
       });//end $.getJSON
   }
   
   var liquidFillJsonFileName = "/json/liquidFill.json"
   var liquidFillId = "ballChart"
   function async_chart_liquidFill() {
   
       // 异步加载数据
       $.getJSON(liquidFillJsonFileName).done(function (data) {
           var element = document.getElementById(liquidFillId);
           console.log(element, liquidFillJsonFileName)
           var myChart = echarts.init(element);
           console.log(data)
           myChart.setOption({
               series: [{
                   data: data
               }]
           });
       });//end $.getJSON
   }
   
   function async_data(){
       async_chart_wordCloud();
       async_chart_relationChart();
       async_data_chart_map();
       async_data_common();
       async_chart_liquidFill();
   }
   
   async_data();

    

3. 后端python代码

import _thread
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtWebEngineWidgets import QWebEngineView
from pyecharts import Geo
from PyQt5.QtCore import QUrl
from win32api import GetSystemMetrics
from PyQt5 import QtGui
from httpserver import *
from asyncJson import *

class MainWindow(QMainWindow):
  def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    self.loadfinished = False
    self.setWindowTitle('大屏展示')
    self.showMaximized()
    #全屏显示
    self.showFullScreen()
    self.isFullScreen = True

    self.webview = WebEngineView()
    self.webview.load(QUrl(index_url))
    self.setCentralWidget(self.webview)

    QShortcut(QtGui.QKeySequence("Escape"), self, self.Esc)
    self.webview.loadFinished.connect(self.SetLoadFinished)

    _thread.start_new_thread(HttpServer, ())
    _thread.start_new_thread(self.ChangeData, ())

  def SetLoadFinished(self):
      self.loadfinished = True

  #模拟刷新数据
  def ChangeData(self):
      while 1:
          #页面加载完毕再开始刷新数据
          if self.loadfinished == False :
              # print("self.loadfinished == False")
              continue
          # print("self.loadfinished == True")
          change_all_json()
          self.webview.page().runJavaScript("async_data()")
          time.sleep(3)

  #按ESC全屏或缩小
  def Esc(self):
      if self.isFullScreen == True :
          self.isFullScreen = False
          #不加这句的话，标题栏就看不到了
          self.showNormal()
          #设置固定宽高
          self.setGeometry(GetSystemMetrics(0)/2, GetSystemMetrics(1)/2, 1280, 768)
          #再移动到屏幕中央
          screen = QDesktopWidget().screenGeometry()
          size = self.geometry()
          self.move((screen.width() - size.width()) / 2, (screen.height() - size.height()) / 2)
      else:
          self.showFullScreen()
          self.isFullScreen = True


class WebEngineView(QWebEngineView):
  windowList = []

  # 重写createwindow()
  def createWindow(self, QWebEnginePage_WebWindowType):
    new_webview =  WebEngineView()
    new_window = MainWindow()
    new_window.setCentralWidget(new_webview)
    #new_window.show()
    self.windowList.append(new_window) #注：没有这句会崩溃！！！
    return new_webview


if __name__ == "__main__":
  app = QApplication(sys.argv)
  w = MainWindow()
  w.show()
  sys.exit(app.exec_())

四、上线运行

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

感谢：本项目引用了互联网大牛的前端代码，然后定制开发实现了后端服务器，最终实现了可视化大屏的完整方案。