专业编程基础技术教程

网站首页 > 基础教程 正文

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

ccvgpt 2024-08-08 13:06:03 基础教程 12 ℃

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


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

之前小伙伴们建议我出一些视频课程来学习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依赖即可。


二、整体架构设计


  1. 前端Echarts开源库：使用WebStorm编辑器；
  2. 后端 http服务器：基于 Python 实现，使用Pycharm或VSCode编辑器；
  3. 数据传输格式：JSON；
  4. 数据源类型：Redis DataBase。实际开发需求中，支持定制HTTP API接口方式或其它各种类型数据库，如PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等。
  5. 数据更新方式：本案例为了展示数据，采用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



更多精彩案例


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

?

Tags：

猜你喜欢

最近发表
标签列表