echarts实现中国疫情地图
2020-02-24 本文已影响0人
MissWang1
最近每天早上醒来第一件事就是看看当天新增人数是否减少了，出院了多少，每个省目前还有多少确诊人数，见到最多的就是中国地图的分布图，由于工作需要，自己也使用echarts实现了一个。效果如下：
image.png
一：认识echarts
ECharts，缩写来自 Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具，一个纯 Javascript 的图表库。目前很多商业项目都在使用，不但好用而且是免费。
二：实现步骤
1.官网上面有很多实例可供大家参考，这个是地图实例的链接：https://www.echartsjs.com/examples/en/editor.html?c=doc-example/map-visualMap-pieces&edit=1
2.在页面左侧框中输入以下数据：
option = {
title: {
text: '中国疫情图',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['中国疫情图']
},
visualMap: {
type: 'piecewise',
pieces: [
{min: 1000, max: 1000000, label: '大于等于1000人', color: '#372a28'},
{min: 500, max: 999, label: '确诊500-999人', color: '#4e160f'},
{min: 100, max: 499, label: '确诊100-499人', color: '#974236'},
{min: 10, max: 99, label: '确诊10-99人', color: '#ee7263'},
{min: 1, max: 9, label: '确诊1-9人', color: '#f5bba7'},
],
color: ['#E0022B', '#E09107', '#A3E00B']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
roamController: {
show: true,
left: 'right',
mapTypeControl: {
'china': true
}
},
series: [
{
name: '确诊数',
type: 'map',
mapType: 'china',
roam: false,
label: {
show: true,
color: 'rgb(249, 249, 249)'
},
data: [
{
name: '北京',
value: 212
}, {
name: '天津',
value: 60
}, {
name: '上海',
value: 208
}, {
name: '重庆',
value: 337
}, {
name: '河北',
value: 126
}, {
name: '河南',
value: 675
}, {
name: '云南',
value: 117
}, {
name: '辽宁',
value: 74
}, {
name: '黑龙江',
value: 155
}, {
name: '湖南',
value: 593
}, {
name: '安徽',
value: 480
}, {
name: '山东',
value: 270
}, {
name: '新疆',
value: 29
}, {
name: '江苏',
value: 308
}, {
name: '浙江',
value: 829
}, {
name: '江西',
value: 476
}, {
name: '湖北',
value: 13522
}, {
name: '广西',
value: 139
}, {
name: '甘肃',
value: 55
}, {
name: '山西',
value: 74
}, {
name: '内蒙古',
value: 34
}, {
name: '陕西',
value: 142
}, {
name: '吉林',
value: 42
}, {
name: '福建',
value: 179
}, {
name: '贵州',
value: 56
}, {
name: '广东',
value: 797
}, {
name: '青海',
value: 15
}, {
name: '西藏',
value: 1
}, {
name: '四川',
value: 282
}, {
name: '宁夏',
value: 34
}, {
name: '海南',
value: 79
}, {
name: '台湾',
value: 10
}, {
name: '香港',
value: 15
}, {
name: '澳门',
value: 9
}
]
}
]
};
此时页面右侧就会渲染出中国疫情地图了。以上是Echarts的Example环境，真实项目中需要加入china.js。
3.在自己的项目中如何使用echarts实现疫情图，静态页面代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>疫情地图展示</title>
<style>
#myEcharts {
width: 800px;
height: 500px;
border: solid 1px red;
margin: 0 auto;
}
</style>
<!-- 引入 echarts.js -->
<script src="https://www.echartsjs.com/examples/vendors/echarts/echarts.min.js?_v_=1578305236132"></script>
<!--引入中国的地图数据js文件，引入后会自动注册地图名字和数据-->
<script src="https://www.echartsjs.com/examples/vendors/echarts/map/js/china.js?_v_=1578305236132"></script>
</head>
<body>
<!--为echarts准备一个dom容器-->
<div id="myEcharts"></div>
<script>
//初始化echarts实例
var myChart = echarts.init(document.getElementById('myEcharts'));
// 指定图表的配置项和数据
option = {
title: {
text: '中国疫情图',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['中国疫情图']
},
visualMap: {
type: 'piecewise',
pieces: [
{ min: 1000, max: 1000000, label: '大于等于1000人', color: '#372a28' },
{ min: 500, max: 999, label: '确诊500-999人', color: '#4e160f' },
{ min: 100, max: 499, label: '确诊100-499人', color: '#974236' },
{ min: 10, max: 99, label: '确诊10-99人', color: '#ee7263' },
{ min: 1, max: 9, label: '确诊1-9人', color: '#f5bba7' },
],
color: ['#E0022B', '#E09107', '#A3E00B']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
roamController: {
show: true,
left: 'right',
mapTypeControl: {
'china': true
}
},
series: [
{
name: '确诊数',
type: 'map',
mapType: 'china',
roam: false,
label: {
show: true,
color: 'rgb(249, 249, 249)'
},
data: [
{
name: '北京',
value: 212
}, {
name: '天津',
value: 60
}, {
name: '上海',
value: 208
}, {
name: '重庆',
value: 337
}, {
name: '河北',
value: 126
}, {
name: '河南',
value: 675
}, {
name: '云南',
value: 117
}, {
name: '辽宁',
value: 74
}, {
name: '黑龙江',
value: 155
}, {
name: '湖南',
value: 593
}, {
name: '安徽',
value: 480
}, {
name: '山东',
value: 270
}, {
name: '新疆',
value: 29
}, {
name: '江苏',
value: 308
}, {
name: '浙江',
value: 829
}, {
name: '江西',
value: 476
}, {
name: '湖北',
value: 13522
}, {
name: '广西',
value: 139
}, {
name: '甘肃',
value: 55
}, {
name: '山西',
value: 74
}, {
name: '内蒙古',
value: 34
}, {
name: '陕西',
value: 142
}, {
name: '吉林',
value: 42
}, {
name: '福建',
value: 179
}, {
name: '贵州',
value: 56
}, {
name: '广东',
value: 797
}, {
name: '青海',
value: 15
}, {
name: '西藏',
value: 1
}, {
name: '四川',
value: 282
}, {
name: '宁夏',
value: 34
}, {
name: '海南',
value: 79
}, {
name: '台湾',
value: 10
}, {
name: '香港',
value: 15
}, {
name: '澳门',
value: 9
}
]
}
]
};
//使用指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
4.数据调取
数据使用腾讯的数据：接口地址：https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5&callback=jQuery34102581268431257997_1582545445186&_=1582545445187
image.png
拿到数据后，发现数据格式是这样子的：
image.png
这个数据是腾讯根据自己的需求组装好的数据格式，我们需要用到的是areaTree下面的children。拿到数据后我们需要处理成图表需要的数据格式。需要的格式是这样子的：
[{
name: '北京11',
value: 212
}, {
name: '天津',
value: 60
}]
直接上对接数据后的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>疫情地图展示</title>
<style>
.container {
width: 1200px;
margin: 0 auto;
}
#myEcharts {
width: 800px;
height: 500px;
border: solid 1px red;
margin: 0 auto;
}
</style>
<script src="https://www.echartsjs.com/examples/vendors/jquery/jquery.js"></script>
<!-- 引入 echarts.js -->
<script src="https://www.echartsjs.com/examples/vendors/echarts/echarts.min.js?_v_=1578305236132"></script>
<!--引入中国的地图数据js文件，引入后会自动注册地图名字和数据-->
<script src="https://www.echartsjs.com/examples/vendors/echarts/map/js/china.js?_v_=1578305236132"></script>
</head>
<body>
<div class="container">
<h3>累计确诊人数如下：</h3>
<!--为echarts准备一个dom容器-->
<div id="myEcharts"></div>
</div>
<script>
//初始化echarts实例
var myChart = echarts.init(document.getElementById('myEcharts'));
// 指定图表的配置项和数据
option = {
title: {
text: '中国疫情图',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['中国疫情图']
},
visualMap: {
type: 'piecewise',
pieces: [
{ min: 1000, max: 1000000, label: '大于等于1000人', color: '#372a28' },
{ min: 500, max: 999, label: '确诊500-999人', color: '#4e160f' },
{ min: 100, max: 499, label: '确诊100-499人', color: '#974236' },
{ min: 10, max: 99, label: '确诊10-99人', color: '#ee7263' },
{ min: 1, max: 9, label: '确诊1-9人', color: '#f5bba7' },
],
color: ['#E0022B', '#E09107', '#A3E00B']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
roamController: {
show: true,
left: 'right',
mapTypeControl: {
'china': true
}
},
series: [
{
name: '确诊数',
type: 'map',
mapType: 'china',
roam: false,
label: {
show: true,
color: 'rgb(249, 249, 249)'
},
data: []
}
]
};
//使用指定的配置项和数据显示图表
myChart.setOption(option);
//获取数据
function getData() {
$.ajax({
url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5",
dataType: "jsonp",
success: function (data) {
// console.log(data.data)
var res = data.data || "";
res = JSON.parse(res);
var newArr = [];
//newArr的数据格式为：
// [{
// name: '北京11',
// value: 212
// }, {
// name: '天津',
// value: 60
// }]
if (res) {
//获取到各个省份的数据
var province = res.areaTree[0].children;
for (var i = 0; i < province.length; i++) {
var json = {
name: province[i].name,
value: province[i].total.confirm
}
newArr.push(json)
}
console.log(newArr)
console.log(JSON.stringify(newArr))
//使用指定的配置项和数据显示图表
myChart.setOption({
series: [
{
name: '确诊数',
type: 'map',
mapType: 'china',
roam: false,
label: {
show: true,
color: 'rgb(249, 249, 249)'
},
data: newArr
}
]
});
}
}
})
}
getData();
</script>
</body>
</html>
三：知识点解析：
option参数的含义：
- title：显示图标的标题
- tooltip：展示提示框，当你鼠标点击某个省份时用来展示对应的确诊人数
- legend：图例，设置图例展示的位置
- visualMap：视觉映射，每个颜色代表什么含义
- series：地图数据可视化，添加data数据
最后再给大家一个友好建议：
1、插件自带的地图省份名字是默认出现在省会城市的位置，导致很多省份的名字有点挤甚至偏移，大家可以打开map/js/china.js
2、检索自己想要更改的省份名字，如湖南
"properties":{"cp":[112.982279,28.19409],"name":"湖南","childNum":3}}
其中cp即表示文字的位置，两个坐标表示经纬度，大家根据需要调整。有兴趣的小伙伴可以试试哦！
对echarts还不熟悉的同学可以先看一遍官方教程哦,地址如下：https://www.echartsjs.com/zh/tutorial.html
待完善。。。
疫情中一个个感人的瞬间，每天都是满满的感动，太多感谢的话都会显得那么苍白无力，只希望疫情赶快过去。
