写在前面，最近收到了很多小伙伴们的建议，大屏的数据源是否可以展示更丰富的种类，比如Excel，数据库等，那就更加贴近小伙伴们的实际工作场景，可以很快在工作中应用，所以应小伙伴需求，就诞生了这篇。另外说明下，很多实际展示场景下需要自动播放效果，本案例也展示了Events和DispatchAction触发的饼图和地图高亮效果，非常实用。
之前很多小伙伴们说能否出一些视频课程来学习Echarts，这样可以更快速的上手，最近挤出来一些时间，录制了《Echart-0基础入门》系列课程（共14节课）Echarts-0基础入门--其他视频教程-编程语言-CSDN程序员研修院正式上线了，希望小伙伴们多多支持。
效果展示
1、首先看动态效果图
2、丰富的主题样式
一、确定需求方案
1、确定产品上线部署的屏幕LED分辨率
px*px，F11全屏后占满整屏无滚动条；其它分辨率屏幕可自适应显示。
2、部署方式
基于免安装可执行程序：支持Windows、Linux、Mac等各种主流操作系统；将可执行程序exe复制到服务器上即可，无需其它环境依赖；
观看方式：既可在服务器上直接观看程序界面，也可远程使用浏览器打开播放，支持Chrome浏览器、浏览器等主流浏览器。
二、整体架构设计
前端基于Echarts开源库设计，使用WebStorm编辑器；后端基于PythonWeb实现，使用Pycharm编辑器；数据传输格式：JSON；数据源类型：Excel；数据源类型：本案例采用pythonquest采集实时数据方式。实际开发需求中，支持定制HTTPAPI接口方式或其它各种类型数据库，如PostgSQL、MySQL、Oracle、MicrosoftSQLServer、SQLite、Excel表格等。数据更新方式：本案例为了展示数据，采用定时拉取方式。实际开发需求中，采用后端数据实时更新，实时推送到前端展示；
三、编码实现（基于篇幅及可读性考虑，此处展示部分关键代码）
1、前端html代码
bodystyle="background-color:#c"divclass="container_fluid"divclass="row_fluid"id="vue_app"divstyle="padding:00"class="col-xs-12col-md-12"dv-decoration-1style="height:4%;"/dv-decoration-1h3id="container_h"/h3/divdivstyle="padding:00"class="col-xs-12col-md-3"dv-border-box-13style="height:29%;padding:00"class="col-xs-12col-md-12"divstyle="height:%;padding:5%5%5%5%;"id="container_0"/div/dv-border-box-13divstyle="padding:00"class="col-xs-12col-md-12"dv-border-box-13style="height:29%;padding:00"class="col-xs-12col-md-12"divstyle="height:%;padding:5%5%5%5%;"id="container_1"/div/dv-border-box-13/divdivstyle="padding:00"class="col-xs-12col-md-12"dv-border-box-13style="height:29%;padding:00"class="col-xs-12col-md-12"divstyle="height:%;padding:5%5%5%5%;"id="container_2"/div/dv-border-box-13/div/divdivstyle="padding:00"class="col-xs-12col-md-6"dv-border-box-13style="height:87%;padding:00"class="col-xs-12col-md-12"divstyle="height:%;padding:2%2%2%2%"id="container_3"/div/dv-border-box-13/divdivstyle="padding:00"class="col-xs-12col-md-3"dv-border-box-13style="height:29%;padding:00"class="col-xs-12col-md-12"divstyle="height:%;padding:5%5%5%5%;"id="container_4"/div/dv-border-box-13divstyle="padding:00"class="col-xs-12col-md-12"dv-border-box-13style="height:29%;padding:00"class="col-xs-12col-md-12"divstyle="height:%;padding:5%5%5%5%;"id="container_5"/div/dv-border-box-13/divdivstyle="padding:00"class="col-xs-12col-md-12"dv-border-box-13style="height:29%;padding:00"class="col-xs-12col-md-12"divstyle="height:%;padding:5%5%5%5%;"id="container_6"/div/dv-border-box-13/div/div/div/div/body
2、前端JS代码
varidContainer_5="container_5";functioninitEchart_5(){//基于准备好的dom，初始化echarts实例varmyChart=echarts.init(document.getElementById(idContainer_5),window.gTheme);option={title:{text:"机型价格占比",left:"left",textStyle:{color:"#be",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(,,,.7)",fontSize:"10",},formatter:"{value}%",},splitLine:{lineStyle:{color:"rgba(,,,.7)",},},},],yAxis:[{name:"价格",type:"category",axisLabel:{show:true,textStyle:{color:"rgba(,,,.7)",fontSize:"10",},},splitLine:{show:false,},},],series:[{type:"bar",},],};//使用刚指定的配置项和数据显示图表。myChart.setOption(option);window.addEventListener("size",function(){myChart.size();});}functionasyncData_5(){$.get("bar_equipment.json").done(function(data){varmyChart=echarts.init(document.getElementById(idContainer_5));myChart.setOption({dataset:{source:data},});});}initEchart_5();
3、Echarts自动高亮效果
本例中的饼图和地图都加了自动高亮效果，再做展示的时候这个功能非常有用。
setInterval(function(){varmyChart=echarts.init(document.getElementById(container));vardataLen=0;try{dataLen=myChart.getOption().dataset[0]["source"].length;}catch{dataLen=myChart.getOption().series[0]["data"].length;}//取消之前高亮的图形myChart.dispatchAction({type:"downplay",seriesIndex:0,dataIndex:curntIndex,});curntIndex=(curntIndex+1)%dataLen;//高亮当前图形myChart.dispatchAction({type:"highlight",seriesIndex:0,dataIndex:curntIndex,});//显示tooltipmyChart.dispatchAction({type:"showTip",seriesIndex:0,dataIndex:curntIndex,});},0);
4、后端python实现的