写在前面，最近收到了很多小伙伴们的建议，大屏的数据源是否可以展示更丰富的种类，比如Excel，数据库等，那就更加贴近小伙伴们的实际工作场景，可以很快在工作中应用，所以应小伙伴需求，就诞生了这篇【 基于 Echarts + Python 动态实时大屏范例（Excel数据源）- 可视大屏案例】。另外说明下，很多实际展示场景下需要自动播放效果，本案例也展示了Events和DispatchAction触发的饼图和地图高亮效果，非常实用。

之前很多小伙伴们说能否出一些视频课程来学习Echarts，这样可以更快速的上手，最近挤出来一些时间，录制了《Echart-0基础入门》系列课程（共14节课）Echarts-0基础入门--其他视频教程-编程语言-CSDN程序员研修院正式上线了，希望小伙伴们多多支持。

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

❤️效果展示❤️

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 class="container_fluid">
            <div class="row_fluid" id="vue_app">
                  <div style="padding:0 0" class="col-xs-12 col-md-12">
                        <dv-decoration-1 style="height:4%;">
                        </dv-decoration-1>

                        <h3 id="container_h"></h3>

                  </div>

                  <div style="padding:0 0" class="col-xs-12 col-md-3">

                        <dv-border-box-13 style="height:29%;padding:0 0" class="col-xs-12 col-md-12">
                              <div style="height:100%;padding:5% 5% 5% 5%;" id="container_0"></div>
                        </dv-border-box-13>

                        <div style="padding:0 0" class="col-xs-12 col-md-12">
                              <dv-border-box-13 style="height:29%;padding:0 0" class="col-xs-12 col-md-12">
                                    <div style="height:100%;padding:5% 5% 5% 5%;" id="container_1"></div>
                              </dv-border-box-13>
                        </div>

                        <div style="padding:0 0" class="col-xs-12 col-md-12">
                              <dv-border-box-13 style="height:29%;padding:0 0" class="col-xs-12 col-md-12">
                                    <div style="height:100%;padding:5% 5% 5% 5%;" id="container_2"></div>
                              </dv-border-box-13>
                        </div>
                  </div>

                  <div style="padding:0 0" class="col-xs-12 col-md-6">

                        <dv-border-box-13 style="height:87%;padding:0 0" class="col-xs-12 col-md-12">
                              <div style="height:100%;padding: 2% 2% 2% 2%" id="container_3"></div>
                        </dv-border-box-13>
                  </div>

                  <div style="padding:0 0" class="col-xs-12 col-md-3">
                        <dv-border-box-13 style="height:29%;padding:0 0" class="col-xs-12 col-md-12">
                              <div style="height:100%;padding:5% 5% 5% 5%;" id="container_4"></div>
                        </dv-border-box-13>

                        <div style="padding:0 0" class="col-xs-12 col-md-12">
                              <dv-border-box-13 style="height:29%;padding:0 0" class="col-xs-12 col-md-12">
                                    <div style="height:100%;padding:5% 5% 5% 5%;" id="container_5"></div>
                              </dv-border-box-13>
                        </div>

                        <div style="padding:0 0" class="col-xs-12 col-md-12">
                              <dv-border-box-13 style="height:29%;padding:0 0" class="col-xs-12 col-md-12">
                                    <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/120705616