写在前面，最近收到了很多小伙伴们的建议，大屏的数据源是否可以展示更丰富的种类，比如Excel，数据库等，那就更加贴近小伙伴们的实际工作场景，可以很快在工作中应用，所以应小伙伴需求，就诞生了这篇 【 基于 Echarts + Python 动态实时大屏范例（Excel数据源）- 可视大屏案例】。另外说明下，很多实际展示场景下需要自动播放效果，本案例也展示了Events和DispatchAction触发的饼图和地图高亮效果，非常实用。
之前很多小伙伴们说能否出一些视频课程来学习Echarts，这样可以更快速的上手，最近挤出来一些时间，录制了《Echart-0基础入门》系列课程（共14节课）Echarts-0基础入门--其他视频教程-编程语言-CSDN程序员研修院 正式上线了，希望小伙伴们多多支持。
效果展示
1、首先看动态效果图
2、丰富的主题样式
一、 确定需求方案
1、确定产品上线部署的屏幕LED分辨率
1280px*768px，F11全屏后占满整屏无滚动条；其它分辨率屏幕可自适应显示。
2、部署方式
- 基于免安装可执行程序：支持Windows、Linux、Mac等各种主流操作系统；将可执行程序exe复制到服务器上即可，无需其它环境依赖；
- 观看方式：既可在服务器上直接观看程序界面，也可远程使用浏览器打开播放，支持Chrome浏览器、360浏览器等主流浏览器。
二、整体架构设计
- 前端基于Echarts开源库设计，使用WebStorm编辑器；
- 后端基于Python Web实现，使用Pycharm编辑器；
- 数据传输格式：JSON；数据源类型：Excel；
- 数据源类型：本案例采用python request 采集实时数据方式。实际开发需求中，支持定制HTTP API接口方式或其它各种类型数据库，如PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等。
- 数据更新方式：本案例为了展示数据，采用定时拉取方式。实际开发需求中，采用后端数据实时更新，实时推送到前端展示；
三、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）
1、前端html代码
<body style="background-color: #01030c"> <div> <div id="vue_app"> <div style="padding:0 0"> <dv-decoration-1 style="height:4%;"> </dv-decoration-1> <h3 id="container_h"></h3> </div> <div style="padding:0 0"> <dv-border-box-13 style="height:29%;padding:0 0"> <div style="height:100%;padding:5% 5% 5% 5%;" id="container_0"></div> </dv-border-box-13> <div style="padding:0 0"> <dv-border-box-13 style="height:29%;padding:0 0"> <div style="height:100%;padding:5% 5% 5% 5%;" id="container_1"></div> </dv-border-box-13> </div> <div style="padding:0 0"> <dv-border-box-13 style="height:29%;padding:0 0"> <div style="height:100%;padding:5% 5% 5% 5%;" id="container_2"></div> </dv-border-box-13> </div> </div> <div style="padding:0 0"> <dv-border-box-13 style="height:87%;padding:0 0"> <div style="height:100%;padding: 2% 2% 2% 2%" id="container_3"></div> </dv-border-box-13> </div> <div style="padding:0 0"> <dv-border-box-13 style="height:29%;padding:0 0"> <div style="height:100%;padding:5% 5% 5% 5%;" id="container_4"></div> </dv-border-box-13> <div style="padding:0 0"> <dv-border-box-13 style="height:29%;padding:0 0"> <div style="height:100%;padding:5% 5% 5% 5%;" id="container_5"></div> </dv-border-box-13> </div> <div style="padding:0 0"> <dv-border-box-13 style="height:29%;padding:0 0"> <div style="height:100%;padding:5% 5% 5% 5%;" id="container_6"></div> </dv-border-box-13> </div> </div> </div> </div></body>2、前端JS代码
var idContainer_5 = "container_5";function initEchart_5() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init( document.getElementById(idContainer_5), window.gTheme ); option = { title: { text: "机型价格占比", left: "left", textStyle: { color: "#3690be", fontSize: "10", }, }, grid: { left: "5%", top: "20%", right: "10%", bottom: "5%", containLabel: true, }, tooltip: {}, dataset: { source: [], }, xAxis: [ { name: "数量", type: "value", axisLabel: { rotate: 50, show: true, textStyle: { color: "rgba(255,255,255,.7)", fontSize: "10", }, formatter: "{value}%", }, splitLine: { lineStyle: { color: "rgba(255,255,255,.7)", }, }, }, ], yAxis: [ { name: "价格", type: "category", axisLabel: { show: true, textStyle: { color: "rgba(255,255,255,.7)", fontSize: "10", }, }, splitLine: { show: false, }, }, ], series: [ { type: "bar", }, ], }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); });}function asyncData_5() { $.get("bar_equipment.json").done(function (data) { var myChart = echarts.init(document.getElementById(idContainer_5)); myChart.setOption({ dataset: { source: data }, }); });}initEchart_5();3、Echarts 自动高亮效果
本例中的饼图和地图都加了自动高亮效果，再做展示的时候这个功能 非常有用。
setInterval(function () { var myChart = echarts.init(document.getElementById(container)); var dataLen = 0; try { dataLen = myChart.getOption().dataset[0]["source"].length; } catch { dataLen = myChart.getOption().series[0]["data"].length; } // 取消之前高亮的图形 myChart.dispatchAction({ type: "downplay", seriesIndex: 0, dataIndex: currentIndex, }); currentIndex = (currentIndex + 1) % dataLen; // 高亮当前图形 myChart.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: currentIndex, }); // 显示 tooltip myChart.dispatchAction({ type: "showTip", seriesIndex: 0, dataIndex: currentIndex, }); }, 1000);4、后端python实现的httpserver代码
def HttpServer(): try: server = HTTPServer((ip, port), MyRequestHandler) listen = "http://%s:%d" % (ip, port) print("服务器监听地址： ", listen) server.serve_forever() except ValueError as e: print("Exception", e) server.socket.close()if __name__ == "__main__": HttpServer()5、Excel数据源及代码
if self.path.find("bar_equipment.json") >= 0: df = pd.read_excel("excel/bar_equipment.xlsx") result = df.to_json(orient='values')四、上线运行效果及命令
<!-- 启动server命令 -->python httpserver.py <!-- 浏览器中输入网址查看大屏（端口为 httpserver.py 中的 port 参数定义） -->http://localhost:88xx <!-- 更多资料参考我的博客主页 -->https://yydatav.blog.csdn.net/<!-- 更多案例参考 -->https://blog.csdn.net/lildkdkdkjf/article/details/120705616xxxxxxxxxxbr <!-- 启动server命令 -->brpython httpserver.py brbr<!-- 浏览器中输入网址查看大屏（端口为 httpserver.py 中的 port 参数定义） -->brhttp://localhost:88xx brbr<!-- 更多资料参考我的博客主页 -->brhttps://yydatav.blog.csdn.net/brbr<!-- 更多案例参考 -->brhttps://blog.csdn.net/lildkdkdkjf/article/details/120705616brbr五、源码下载
21【源码】数据可视化：基于Echarts+Python动态实时大屏范例-Excel数据源.zip-企业管理文档类资源-CSDN下载
注：源码包括python的httpserver + Excel数据源码 + echarts
六、更多精彩案例
YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客