脚本宝典收集整理的这篇文章主要介绍了【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
1280px*768px,F11全屏后占满整屏无滚动条;其它分辨率屏幕可自适应显示。
<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>
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();
本例中的饼图和地图都加了自动高亮效果,再做展示的时候这个功能 非常有用。
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);
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()
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 wangt.cc /
<!-- 更多案例参考 -->
https://blog.csdn wangt.cc /lildkdkdkjf/article/details/120705616
21【源码】数据可视化:基于Echarts+Python动态实时大屏范例-Excel数据源.zip-企业管理文档类资源-CSDN下载
注:源码包括python的httpserver + Excel数据源码 + echarts
本次分享结束,欢迎讨论!QQ微信同号: 6550523
YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客
以上是脚本宝典为你收集整理的【21】数据可视化:基于 Echarts + Python 动态实时大屏范例- Excel数据源全部内容,希望文章能够帮你解决【21】数据可视化:基于 Echarts + Python 动态实时大屏范例- Excel数据源所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。