【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、首先看动态效果图 

【21】数据可视化:基于 Echarts + Python 动态实时大屏范例- Excel数据源_第1张图片

2、丰富的主题样式

  【21】数据可视化:基于 Echarts + Python 动态实时大屏范例- Excel数据源_第2张图片

 【21】数据可视化:基于 Echarts + Python 动态实时大屏范例- Excel数据源_第3张图片

一、 确定需求方案

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数据源及代码

【21】数据可视化:基于 Echarts + Python 动态实时大屏范例- Excel数据源_第4张图片

 【21】数据可视化:基于 Echarts + Python 动态实时大屏范例- Excel数据源_第5张图片

        if self.path.find("bar_equipment.json") >= 0:
            df = pd.read_excel("excel/bar_equipment.xlsx")
            result = df.to_json(orient='values')

四、上线运行效果及命令

【21】数据可视化:基于 Echarts + Python 动态实时大屏范例- Excel数据源_第6张图片​​​​​​​


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博客

你可能感兴趣的:(【数据可视化大屏案例】,echarts,可视化大屏,python,javascript,Excel)