赞
踩
我是 YYDataV数据可视化
专注于 数据可视化大屏,工厂扫码装箱系统 等
我的微信 6550523,多多交流 ~
目录
四.编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码)
前言:本案例爬取数据源为腾讯疫情数据, 对数据进行分析归类处理,然后制作成32:9超宽分辨率的可视化大屏。
代码中预置了12个主题风格,实际开发中可根据实际情况二次增加。
切换主题,我们可以看到:主题的配色变化了另一种风格。
这个案例的大屏分辨率是32:9,超炫的的宽屏比。
根据电脑分辨率屏幕自适应显示,F11全屏查看;
B/S方式:支持Windows、Linux、Mac等各种主流操作系统;支持主流浏览器Chrome,Microsoft Edge,360等;服务器采用python语言编写,配置好python环境即可。
- headers = {
- 'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 /537.36'
- }
- # 国内疫情数据统计
- url = 'https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=statisGradeCityDetail,diseaseh5Shelf'
- response = requests.get(url, headers=headers)
- chinaTotal = response.json()['data']['diseaseh5Shelf']['chinaTotal']
- chinaAdd = response.json()['data']['diseaseh5Shelf']['chinaAdd']
- dom_list = {
- "china": {
- "localConfirm": chinaTotal['localConfirm'],
- "nowConfirm": chinaTotal['nowConfirm'],
- "confirm": chinaTotal['confirm'],
- "dead": chinaTotal['dead'],
- "localConfirm_": chinaAdd['localConfirmH5'],
- "nowConfirm_": chinaAdd['nowConfirm'],
- "confirm_": chinaAdd['confirm'],
- "dead_": chinaAdd['dead']
- },
- }
生成中国地图所需的json数据 - 生成 static/map_china_map/map_china_map.json 文件
- statisGradeCityDetail = response.json()['data']['statisGradeCityDetail']
- # 生成中国地图数据
- # pandas分组求和groupby sum
- df = pd.DataFrame(statisGradeCityDetail)
- gp_df = df[["confirmAdd", "confirm", "nowConfirm"]
- ].groupby(df['province']).sum()
-
- # reset_index 将province变成了列,将索引设置成了自然数0 1 2 ...
- gp_df = gp_df.reset_index()
- # print(gp_df)
- # 生成新列名
- gp_df = gp_df.rename(
- columns={'province': 'name'})
-
- print("4. 生成 map_china_map 图表的数据", gp_df)
- gp_df.to_json(
- "static/map_china_map/map_china_map.json", orient="records")
使用bootstrap container-fluid, row, col等实现。
- <body id="container_body">
- <div class="container-fluid">
- <!-- 外框 1 -->
- <div class="row" id="container_1">
- <h3 style="color:#f5efef; text-align: center;">30【源码】数据可视化大屏:基于 Echarts +
- Python
- Flask 实现的32-9超宽大屏 - 中国&国际疫情实时追踪 </h3>
- </div>
-
- <!-- 外框 2 -->
- <div class="row" id="container_2">
- <!-- 左侧 -->
- <div class="col-3">
- <!-- 左侧第1行 -->
- <div class="row" style="height: 20%">
- <div id="container_l1" class="col-3">
- </div>
-
- <div id="container_l2" class="col-3">
- </div>
-
- <div id="container_l3" class="col-3">
- </div>
-
- <div id="container_l4" class="col-3">
- </div>
- </div>
- <!-- 左侧第2行 -->
- <div class="row" style="height: 44%">
- <div id="container_l5" class="col">
- </div>
- </div>
-
- <!-- 左侧第3行 -->
- <div class="row" style="height: 35%">
- <div id="container_l6" class="col">
- <dv-scroll-board id="vue_app" :config="config" />
- </div>
- </div>
- </div>
-
- <!-- 中间 -->
- <div class="col-3">
- <div class="row" style="height: 100%">
- <div id="container_m1_root" class="col">
- <div class="div-section">
- <button type="button" class="btn btn-info" style="width: fit-content;"
- onclick="async_echart_china('container_m1', 'map_china_map/map_china_map.json', 'confirmAdd')">新增确诊</button>
- <button type="button" class="btn btn-info" style="width: fit-content;"
- onclick="async_echart_china('container_m1', 'map_china_map/map_china_map.json', 'confirm')">累计确诊</button>
- <button type="button" class="btn btn-info" style="width: fit-content;"
- onclick="async_echart_china('container_m1', 'map_china_map/map_china_map.json', 'nowConfirm')">现有确诊</button>
- </div>
- <div id="container_m1"></div>
- </div>
- </div>
- </div>
- <!-- 中间 -->
- <div class="col-3">
- <div class="row" style="height: 100%">
- <div class="col" id="container_m2_root">
- <div class="div-section">
- <button type="button" class="btn btn-info" style="width: fit-content;"
- onclick="async_echart_map_geo_map_world('container_m2', 'map_geo_map_world/map_geo_map_world.json', 'confirmAdd')">新增确诊</button>
- <button type="button" class="btn btn-info" style="width: fit-content;"
- onclick="async_echart_map_geo_map_world('container_m2', 'map_geo_map_world/map_geo_map_world.json', 'confirm')">累计确诊</button>
- <button type="button" class="btn btn-info" style="width: fit-content;"
- onclick="async_echart_map_geo_map_world('container_m2', 'map_geo_map_world/map_geo_map_world.json', 'nowConfirm')">现有确诊</button>
- </div>
- <div id="container_m2"></div>
- </div>
- </div>
-
- </div>
-
- <!-- 右侧 -->
- <div class="col-3">
- <!-- 第1行 -->
- <div class="row" style="height: 20%">
- <div id="container_r1" class="col">
- </div>
-
- <div id="container_r2" class="col">
- </div>
-
- <div id="container_r3" class="col">
- </div>
-
- <div id="container_r4" class="col">
- </div>
- </div>
- <!-- 第2行 -->
- <div class="row" style="height: 44%">
- <div id="container_r5" class="col">
- </div>
- </div>
-
- <!-- 第3行 -->
- <div class="row" style="height: 35%">
- <div id="container_r6" class="col">
- <dv-scroll-board id="vue_app_2" :config="config" />
- </div>
- </div>
- </div>
- </div>
- </div>
-
-
- <!-- 鼠标右键切换主题 theme [1/2] -->
- <!-- style="width: 200px;" 必须写在html,不能写在css文件中 -->
- <ul id="right_menu" style="width: 200px;">
- <li><img src="img/drop-down.png"> 主题列表</li>
- <li>infographic</li>
- <li>macarons</li>
- <li>roma</li>
- <li>shine</li>
- <li>walden</li>
- <li>westeros</li>
- <li>wonderland</li>
- <li>vintage</li>
- <li>purple-passion</li>
- <li>chalk</li>
- <li>dark</li>
- <li>essos</li>
- </ul>
- </body>
- function init_echart_map_geo_map_world(container) {
- var chartDom = document.getElementById(container);
- var myChart = echarts.init(chartDom, window.gTheme);
-
- option = {
- title: {
- text: "世界疫情实时数据",
- top: "2%",
- left: "center",
- textStyle: {
- // color: "hsl(200, 86%, 48%)",
- fontSize: "20",
- },
- },
-
- tooltip: {
- trigger: "item",
- formatter: function (params) {
- console.log(params);
- value = 0;
- if (params.value) value = params.value;
- return params.seriesName + "<br>" + params.name + " : " + value + "人";
- },
- },
-
- visualMap: {
- type: "piecewise",
- splitNumber: 5,
- pieces: [
- { gt: 10000 },
- { gt: 1000, lte: 9999 },
- { gt: 500, lte: 999 },
- { gt: 100, lte: 499 },
- { gt: 10, lte: 99 },
- { gt: 1, lte: 9 },
- { lte: 0 },
- ],
-
- textStyle: {
- color: "#fff",
- },
- top: "bottom",
- },
- geo: [
- {
- map: "world",
- layoutCenter: ["50%", "50%"],
- zoom: 1.2,
- roam: true,
- // 地图放大或缩小的尺寸
- layoutSize: "100%",
- selectedMode: "single",
- label: {
- emphasis: {
- show: false,
- },
- },
- // 地图区域的多边形 图形样式。
- itemStyle: {
- // 图形阴影颜色。支持的格式同color。
- shadowColor: "black",
- // 图形阴影的模糊大小。
- shadowBlur: 10,
- // 阴影水平方向上的偏移距离。
- shadowOffsetX: 2,
- // 阴影垂直方向上的偏移距离。
- shadowOffsetY: 2,
- },
- // 高亮状态下的多边形和标签样式。
- emphasis: {
- itemStyle: {
- borderWidth: 3,
- borderColor: "purple",
- // areaColor: "#ffdead",
- },
- },
- },
- ],
- series: {
- name: "累计确诊",
- type: "map",
- coordinateSystem: "geo",
- geoIndex: 0,
- zoom: 1.2,
- roam: true,
- },
- };
- // 使用刚指定的配置项和数据显示图表。
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
- });
- }
-
- function async_echart_map_geo_map_world(container, filename, section) {
- $.getJSON(filename).done(function (data) {
- var myChart = echarts.init(
- document.getElementById(container),
- window.gTheme
- );
- series = "";
- data_section = [];
- if (section == "confirmAdd") {
- series = "新增确诊";
- data_section = data.map((item) => {
- return { name: item.name, value: item.confirmAdd };
- });
- }
- if (section == "confirm") {
- series = "累计确诊";
- data_section = data.map((item) => {
- return { name: item.name, value: item.confirm };
- });
- }
- if (section == "nowConfirm") {
- series = "现有确诊";
- data_section = data.map((item) => {
- return { name: item.name, value: item.nowConfirm };
- });
- }
- myChart.setOption({
- series: { name: series, data: data_section },
- });
- }); //end $.getJSON
- }
世界疫情地图数据
- [
- {
- "name": "Afghanistan",
- "nameChinese": "\u963f\u5bcc\u6c57",
- "confirmAdd": 0,
- "confirm": 145,
- "nowConfirm": 139
- },
- {
- "name": "Albania",
- "nameChinese": "\u963f\u5c14\u5df4\u5c3c\u4e9a",
- "confirmAdd": 0,
- "confirm": 212,
- "nowConfirm": 169
- },
- {
- "name": "Algeria",
- "nameChinese": "\u963f\u5c14\u53ca\u5229\u4e9a",
- "confirmAdd": 0,
- "confirm": 511,
- "nowConfirm": 448
- },
- ... ...
- ]
支持在每个echarts图表中独立控制定时更新的间隔。
- // 定时1s执行数据更新函数
- setInterval(function () {
- async_echart_bar_horizontal(
- container,
- path_bar_horizontal + "bar_horizontal.json"
- );
- }, 1000);
- from flask import Flask
- app = Flask(__name__, static_folder="static", template_folder="template")
-
-
- # 主程序在这里
- if __name__ == "__main__":
-
- # 开启线程,触发动态数据
- a = threading.Thread(target=asyncJson.loop)
- a.start()
-
- # 开启 flask 服务
- app.run(host='0.0.0.0', port=88, debug=True)
- <!-- 启动server命令 -->
- python main.py
-
- <!-- 浏览器中输入网址查看大屏(端口为 main.py 中的 port 参数定义) -->
- http://localhost:88/static/index.html
-
- <!-- 更多资料参考我的博客主页 -->
- https://yydatav.blog.csdn.net/
-
- <!-- 更多案例参考 -->
- https://blog.csdn.net/lildkdkdkjf/article/details/120705616
-
- 我的微信号:6550523 欢迎多多交流
30【源码】数据可视化:基于Echarts+PythonFlask实现的32-9超宽大屏-中国&国际疫情实时追踪-企业管理文档类资源-CSDN下载
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。