30【源码】数据可视化大屏：基于 Echarts + Python Flask 实现的32-9超宽大屏 - 中国&国际疫情实时追踪
我是 YYDataV数据可视化
专注于 数据可视化大屏，工厂扫码装箱系统 等
我的微信 6550523，多多交流 ~
前言：本案例爬取数据源为腾讯疫情数据, 对数据进行分析归类处理，然后制作成32：9超宽分辨率的可视化大屏。
效果展示
1.动态实时更新数据效果图
2.鼠标右键切换主题
代码中预置了12个主题风格，实际开发中可根据实际情况二次增加。
切换主题，我们可以看到：主题的配色变化了另一种风格。
一. 确定需求方案
1. 屏幕分辨率
这个案例的大屏分辨率是32:9，超炫的的宽屏比。
根据电脑分辨率屏幕自适应显示，F11全屏查看；
2. 部署方式
B/S方式：支持Windows、Linux、Mac等各种主流操作系统；支持主流浏览器Chrome，Microsoft Edge，360等；服务器采用python语言编写，配置好python环境即可。
二. 整体架构设计
- 前端Echarts开源库：使用 WebStorm 编辑器；
- 后端 http服务器：基于 Python 实现，使用 Pycharm 或 VSCode 编辑器；
- 数据传输格式：JSON；
- 数据源类型：JSON文件。实际开发需求中，支持定制HTTP API接口方式或其它各种类型数据库，如PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等。
- 数据更新方式：采用http get 轮询方式 。在实际应用中，也可以视情况选择j监测后端数据实时更新，实时推送到前端的方式；
三.开发思路
1. 数据爬取 requests
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']
},
}2. 数据准备 pandas
生成中国地图所需的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")四.编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）
1. 前端html代码
使用bootstrap container-fluid， row， col等实现。
30【源码】数据可视化大屏：基于 Echarts +
Python
Flask 实现的32-9超宽大屏 - 中国&国际疫情实时追踪
主题列表- infographic
- macarons
- roma
- shine
- walden
- westeros
- wonderland
- vintage
- purple-passion
- chalk
- dark
- essos
2. 世界疫情地图 echarts world
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 + "
" + 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();
});
}3. 动态加载数据代码
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
}4. 服务器端 JSON 通信数据定义
世界疫情地图数据
[
{
"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
},
... ...
]5. 前端JS - 数据定时更新控制
支持在每个echarts图表中独立控制定时更新的间隔。
// 定时1s执行数据更新函数
setInterval(function () {
async_echart_bar_horizontal(
container,
path_bar_horizontal + "bar_horizontal.json"
);
}, 1000);6.后端 flask 服务器
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)四. 启动命令
python main.py
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下载
更多可视化案例
YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客