【21】数据可视化：基于 Echarts + Python 动态实时大屏范例- Excel数据源

目录

❤️效果展示❤️

1、首先看动态效果图 

2、丰富的主题样式

一、 确定需求方案

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

2、部署方式 

二、整体架构设计

三、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）

1、前端html代码 

2、前端JS代码

3、Echarts 自动高亮效果

4、后端python实现的httpserver代码

5、Excel数据源及代码

四、上线运行效果及命令

五、源码下载

六、更多精彩案例

---

写在前面，最近收到了很多小伙伴们的建议，大屏的数据源是否可以展示更丰富的种类，比如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浏览器等主流浏览器。

二、整体架构设计

1. 前端基于Echarts开源库设计，使用WebStorm编辑器；
2. 后端基于Python Web实现，使用Pycharm编辑器；
3. 数据传输格式：JSON；数据源类型：Excel；
4. 数据源类型：本案例采用python request 采集实时数据方式。实际开发需求中，支持定制HTTP API接口方式或其它各种类型数据库，如PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等。
5. 数据更新方式：本案例为了展示数据，采用定时拉取方式。实际开发需求中，采用后端数据实时更新，实时推送到前端展示；

三、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）

1、前端html代码 

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')

四、上线运行效果及命令

​​​​​​​

python httpserver.py 


http://localhost:88xx 


https://yydatav.blog.csdn.net/


https://blog.csdn.net/lildkdkdkjf/article/details/120705616

五、源码下载

21【源码】数据可视化：基于Echarts+Python动态实时大屏范例-Excel数据源.zip-企业管理文档类资源-CSDN下载

注：源码包括python的httpserver + Excel数据源码 + echarts

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

六、更多精彩案例

YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客