目录
数据连接 - python Redis
效果展示
一、确定需求方案
1、确定产品上线部署的屏幕分辨率
2、部署方式
二、整体架构设计
三、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）
1、前端html代码 - 页面整体布局
2、前端JS代码 - Echarts地图组件
3、Echarts 自动高亮 - 地图组件
4、后端python实现的httpserver代码
5、Redis 数据源及代码
1、数据连接代码
2、数据查询代码
四、上线运行效果
五、启动命令
六、源码下载
更多精彩案例
写在前面，最近收到了很多小伙伴们的建议，大屏的数据源是否可以展示更丰富的种类，比如Excel，数据库等，那就更加贴近小伙伴们的实际工作场景，可以很快在工作中应用，所以应小伙伴需求，就诞生了这篇【基于 Echarts + Python 动态实时大屏范例 - Redis数据源】。另外说明下，很多实际展示场景下需要自动播放效果，本案例也展示了Events和DispatchAction触发的饼图和地图高亮效果，非常实用。
之前小伙伴们建议我出一些视频课程来学习Echarts，这样可以更快上手，所以我就追星赶月的录制了《Echart-0基础入门》系列课程（共14节课），希望小伙伴们多多支持。
话不多说，开始分享干货，欢迎讨论！QQ微信同号： 6550523
数据连接 - python Redis
Redis（Remote Dictionary Server )，即远程字典服务，是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。Value 支持 string(字符串)，list(列表)，set(集合)，zset(有序集合)，hash(哈希类型)等类型。
Redis 官网： Redis
ptyhon Redis教程：Python redis 使用介绍 | 菜鸟教程
效果展示
一、确定需求方案
1、确定产品上线部署的屏幕分辨率
根据电脑分辨率屏幕自适应显示，F11全屏查看；
2、部署方式
B/S方式：支持Windows、Linux、Mac等各种主流操作系统；支持主流浏览器Chrome，Microsoft Edge，360等；服务器采用python语言编写，配置下python依赖即可。
二、整体架构设计
前端Echarts开源库：使用WebStorm编辑器；后端 http服务器：基于 Python 实现，使用Pycharm或VSCode编辑器；数据传输格式：JSON；数据源类型：Redis DataBase。实际开发需求中，支持定制HTTP API接口方式或其它各种类型数据库，如PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等。数据更新方式：本案例为了展示数据，采用http get拉取方式。实际开发需求中，采用后端数据实时更新，实时推送到前端展示；三、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）
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代码 - Echarts地图组件
document.write("<script language=javascript src=util/china.js></script>");var myChart;var data = [];var mapOption;var barOption;var currentOption;function initEchartMap(idContainer) {myChart = echarts.init(document.getElementById(idContainer), window.gTheme);mapOption = {tooltip: {trigger: "item",formatter: function (params) {value = 0;if (!window.isNaN(params.value)) {value = params.value;}return params.name + " : " + value;},},visualMap: {realtime: true,calculable: true,seriesIndex: 0,},geo: [{map: "china",roam: true,layoutCenter: ["50%", "55%"],layoutSize: "120%",selectedMode: "single",zoom: 0.9},],series: [{name: "地图",type: "map",coordinateSystem: "geo",geoIndex: 0,data: [],}],};barOption = {grid: {left: "10%",top: "20%",right: "5%",bottom: "5%",containLabel: true,},xAxis: {type: "value",axisLabel: {textStyle: {color: "rgba(255,255,255,.7)",fontSize: 12,},},axisLine: {lineStyle: {color: "rgba(255,255,255,.2)",},},splitLine: {lineStyle: {color: "rgba(255,255,255,.1)",},},},yAxis: {type: "category",axisLabel: {rotate: 30,textStyle: {color: "rgba(255,255,255,.7)",fontSize: 12,},},axisLine: {lineStyle: {color: "rgba(255,255,255,.2)",},},splitLine: {lineStyle: {color: "rgba(255,255,255,.1)",},},data: data.map(function (item) {return item.name;}),},dataZoom: [{type: "slider",yAxisIndex: 0,left: "2%",start: 50,end: 100,},],animationDurationUpdate: 1000,series: [{type: "bar",id: "population",data: data.map(function (item) {return item.value;}),universalTransition: true,},],};currentOption = mapOption;myChart.setOption(mapOption);setInterval(function () {currentOption = currentOption === mapOption ? barOption : mapOption;myChart.setOption(currentOption, true);}, 3000);window.addEventListener("resize", function () {myChart.resize();});}function asyncDataMap(filename) {$.getJSON(filename).done(function (res) {data = res.sort(function (a, b) {return a.value - b.value;});barOption.series[0].data = data.map(function (item) {return item.value;});barOption.yAxis.data = data.map(function (item) {return item.name;});mapOption.series[0].data = res;currentOption = currentOption === mapOption ? mapOption : barOption;myChart.setOption(currentOption, true);}); //end $.getJSON}
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,});// 显示 tooltipmyChart.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、Redis 数据源及代码
1、数据连接代码
# 创建 redis 连接池pool = redis.ConnectionPool(host='192.168.1.27', port=6379, decode_responses=True)
2、数据查询代码
def get_kv(name, is_zip=False):r = redis.Redis(connection_pool=pool)# hkeys得到name所有的keys， hvals得到name所有的valuekeys, values_str = r.hkeys(name), r.hvals(name)# 将字符串转为int，否则echarts pie_sex渲染错误values = [int(item) for item in values_str]if is_zip:return list(zip(keys, values))else:return keys, values
四、上线运行效果
五、启动命令
<!-- 启动server命令 -->python httpserver.py <!-- 浏览器中输入网址查看大屏（端口为 httpserver.py 中的 port 参数定义） -->http://localhost:88xx <!-- 更多资料参考我的博客主页 -->https://yydatav./<!-- 更多案例参考 -->/lildkdkdkjf/article/details/120705616
六、源码下载
23【源码】数据可视化：基于Echarts+Python动态实时大屏范例-Redis数据源.zip-企业管理文档类资源-CSDN下载
注：源码包括python的httpserver + Redis数据源码 + eCharts
本次分享结束，欢迎讨论！QQ微信同号： 6550523
更多精彩案例
YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客
