「23」数据可视化:基于 Echarts + Python 实时大屏范例 - Redis 数据源

mhr18 2024-11-10 09:49 24 浏览 0 评论

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

之前小伙伴们建议我出一些视频课程来学习Echarts，这样可以更快上手，所以我就追星赶月的录制了《Echart-0基础入门》系列课程（共14节课） ，希望小伙伴们多多支持。

数据连接 - 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,
    });
    // 显示 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、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所有的value
    keys, 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.blog.csdn.net/

<!-- 更多案例参考 -->
https://blog.csdn.net/lildkdkdkjf/article/details/120705616

六、源码下载

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

注：源码包括python的httpserver + Redis数据源码 + eCharts

「23」数据可视化:基于 Echarts + Python 实时大屏范例 - Redis 数据源

数据连接 - python Redis

效果展示

一、确定需求方案

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

2、部署方式

二、整体架构设计

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

1、前端html代码 - 页面整体布局

2、前端JS代码 - Echarts地图组件

3、Echarts 自动高亮 - 地图组件

4、后端python实现的httpserver代码

5、Redis 数据源及代码

1、数据连接代码

2、数据查询代码

四、上线运行效果

五、启动命令

六、源码下载

更多精彩案例

相关推荐

取消回复欢迎你发表评论:

生产系统数据库操作规范(2):（数据库生产库是什么意思）

Redis客户端 Jedis 与 Lettuce

高并发架构系列:Redis并发竞争key的解决方案详解

redis如何防止并发（redis如何防止高并发）

开源推荐:如何实现的一个高性能 Redis 服务器

redis安装与调优部署文档(WinServer)

Redis 入门 - 安装最全讲解(Windows、Linux、Docker)

一文带你了解 Redis 的发布与订阅的底层原理

Redis如何应对并发访问（redis控制并发量）

Java SE Development Kit 8u441下载地址【windows版本】

「23」数据可视化:基于 Echarts + Python 实时大屏范例 - Redis 数据源

数据连接 - python Redis

效果展示

一、 确定需求方案

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

2、部署方式

二、整体架构设计

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

1、前端html代码 - 页面整体布局

2、前端JS代码 - Echarts地图组件

3、Echarts 自动高亮 - 地图组件

4、后端python实现的httpserver代码

5、Redis 数据源及代码

1、数据连接代码

2、数据查询代码

四、上线运行效果

五、启动命令

六、源码下载

更多精彩案例

相关推荐

取消回复欢迎 你 发表评论:

生产系统数据库操作规范(2):（数据库生产库是什么意思）

Redis客户端 Jedis 与 Lettuce

高并发架构系列:Redis并发竞争key的解决方案详解

redis如何防止并发（redis如何防止高并发）

开源推荐:如何实现的一个高性能 Redis 服务器

redis安装与调优部署文档(WinServer)

Redis 入门 - 安装最全讲解(Windows、Linux、Docker)

一文带你了解 Redis 的发布与订阅的底层原理

Redis如何应对并发访问（redis控制并发量）

Java SE Development Kit 8u441下载地址【windows版本】

一、确定需求方案

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

取消回复欢迎你发表评论: