用程序猿的话来讲，好久没有发新包了，今天就给大家演示Echarts/PyQT/Flask实现的 动态实时拖拉拽大屏 ，重点的事情说三遍：自定义拖拉拽，自定义拖拉拽，自定义拖拉拽！！！
数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的“酷炫吊炸天”的霸道总裁大屏驾驶舱。
之前有小伙伴们建议我出一些视频课程来学习Echarts，这样可以更快上手，所以我就追星赶月的录制了《Echarts - 0基础入门课程》，希望对有需要的小伙伴有帮助。
传送门
2+TLZ【源码】数据可视化：基于Echarts+PyQT+Flask实现的动态实时【拖拉拽大屏】-数据中心.zip-企业管理文档类资源-CSDN下载
拖拉拽效果
拖拉拽的切片效果图 
一、 确定需求方案
1、确定产品上线部署的屏幕LED分辨率
本案例基于16:9 屏宽比，F11全屏显示。
2、部署方式
基于免安装可执行程序：支持Windows、Linux、Mac等多种操作系统；
二、整体架构设计
- 前端图表 基于Echarts开源库设计，使用WebStorm编辑器；
- 前端布局 基于PyQT Dock Spliter 实现；
- 后端 基于Python Flask实现，使用 IDEA 编辑器；
- 数据传输格式：JSON；
- 数据源类型：目前采用JSON文件方式，自行添加Mybatis可支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite，自行添加Pandas可支持Excel表格等，还可以定制HTTP API接口方式。
- 数据更新方式：采用http get 轮询方式 。在实际应用中，也可以视情况选择j监测后端数据实时更新，实时推送到前端的方式；
三、编码实现 （关键代码）
1、前端html实现 - Echarts图表样式style
这里将每个Echarts独立出一个html页面，为了嵌套到 Pyqt 的 QDockWidget 中。
这个版本对代码进行了优化，将每个Echarts图表独立为一个模块，主页面只需要引入对应的*/loader.js文件，即可实现Echarts图表，非常简便。
效果如图：
html 布局代码如下：
<body style=" background-color:rgb(11, 18, 39)">
<div id="vue_app" class="container-fluid">
<div id="container_m1" style="height: 100%; width: 100%;">
</div>
</div>
</body>js 渲染 echarts 代码如下：
function init_echart_map_china_effectScatter(container) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(container), window.gTheme);
var data = [];
var geoCoordMap = {};
option = {
// title: {
// text: "国内销售额分布",
// top: "5%",
// left: "center",
// textStyle: {
// // color: "hsl(200, 86%, 48%)",
// fontSize: "16",
// },
// },
tooltip: {
trigger: "item",
formatter: function (params) {
if (typeof params.value[2] == "undefined") {
return params.name + " : " + params.value;
} else {
return params.name + " : " + params.value[2];
}
},
},
geo: {
map: "china",
layoutCenter: ["50%", "50%"],
zoom: 1.5,
roam: true,
// 地图放大或缩小的尺寸
layoutSize: "100%",
selectedMode: "single",
label: {
emphasis: {
show: false,
},
},
// 地图背景色:蓝色
itemStyle: {
normal: {
areaColor: "#4c60ff",
borderColor: "#002097",
},
emphasis: {
areaColor: "#293fff",
},
},
},
series: [
{
name: "点图",
type: "scatter",
coordinateSystem: "geo",
data: [],
symbolSize: function (val) {
return val[2] / 40;
},
label: {
normal: {
formatter: "{b}",
position: "right",
show: false,
},
emphasis: {
show: true,
},
},
},
{
name: "Top 5",
type: "effectScatter",
coordinateSystem: "geo",
data: [],
symbolSize: function (val) {
return val[2] / 30;
},
showEffectOn: "render",
rippleEffect: {
brushType: "stroke",
},
hoverAnimation: true,
label: {
normal: {
formatter: "{b}",
position: "right",
show: true,
textStyle: {
color: "rgba(255,255,255,.8)",
fontSize: 14,
},
},
},
zlevel: 1,
},
],
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}js 动态更新数据代码：
function async_echart_map_china_effectScatter(container, filename) {
$.getJSON(filename).done(function (data) {
var myChart = echarts.init(document.getElementById(container));
myChart.setOption({
series: [
{ data: data },
{
data: data
.sort(function (a, b) {
return b.value[2] - a.value[2];
})
.slice(0, 5),
},
],
});
});
}2、后端Python Flask WEB 服务器
app = Flask(__name__, static_folder="static", template_folder="template")
@app.route('/')
def hello_world():
return 'Hello World!'
# 主程序在这里
if __name__ == "__main__":
# 开启线程，触发动态数据
a = threading.Thread(target=asyncJson.loop)
a.start()
# 开启 flask 服务
app.run(host='0.0.0.0', port=88, debug=True)3、拖拉拽布局 QDockWidget
使用 QDockWidget 控制 移动 悬浮 窗口。
使用 QSplitter 分割窗口控制边界。
使用 QWebEngineView 加载 html页面。
# 创建QDockWidget窗口（标题，自身窗口）
dock = QDockWidget(title)
# 实例化QSplitter控件, 并设置初始为水平方向布局
splitter = QSplitter(Qt.Horizontal)
# 向Splitter内添加控件。并设置游戏的初始大小
browser = QWebEngineView()
browser.load(QUrl(url))
splitter.addWidget(browser)
dock.setWidget(splitter)4、数据通信 JSON 格式
[{"name": "长沙", "value": [113.019455, 28.200103, 661]}, {"name": "海门", "value": [121.15, 31.89, 194]}, {"name": "赤峰", "value": [118.87, 42.28, 161]}, {"name": "鄂尔多斯", "value": [109.781327, 39.608266, 194]}, {"name": "招远", "value": [120.38, 37.35, 835]}, {"name": "舟山", "value": [122.207216, 29.985295, 706]}, {"name": "齐齐哈尔", "value": [123.97, 47.33, 857]}, {"name": "盐城", "value": [120.13, 33.38, 696]}, {"name": "青岛", "value": [120.33, 36.07, 569]}, {"name": "乳山", "value": [121.52, 36.89, 108]}, {"name": "金昌", "value": [102.188043, 38.520089, 732]}, {"name": "泉州", "value": [118.58, 24.93, 649]}]四、开发配置&代码结构说明
<!-- 启动server命令 -->
python main.py
<!-- 浏览器中输入网址查看大屏（端口为 main.py 中的 port 参数定义） -->
http://localhost:88/static/xxx/index.html
<!-- 启动dock命令 -->
python dock.py
----------
<!-- 逻辑说明 -->
http 服务器：使用 python flask 框架实现
前端页面布局 index.html 实现方式： 使用bootstrap布局
前端 echarts 图表实现方式：每个图表独立的js文件实现
动态数据 *.json 实现方式：
asyncJson.py 定时修改json数据源(python asyncJson.py )
客户端定时器(setInterval();)定时刷最新数据
调用方式：
需要《点 流向 区域》等地图，只需导入对应目录下的 loader.js 即可
----------
<!-- 更多资料参考我的博客主页 -->
https://yydatav.blog.csdn.net/
<!-- 更多案例参考 -->
https://blog.csdn.net/lildkdkdkjf/article/details/120705616
我的微信号：6550523 欢迎多多交流五、更多案例
YYDatav的数据可视化大屏《精彩案例汇总》（Python&Echarts源码）_YYDataV的博客-CSDN博客
《工厂订单出入库信息管理系统》完整案例详解（含演示网址账号）（Go&Vue源码）_YYDataV的博客-CSDN博客
本次分享结束，欢迎讨论！QQ微信同号： 6550523