最近每天早上醒來第一件事就是看看當(dāng)天新增人數(shù)是否減少了俩滥,出院了多少,每個(gè)省目前還有多少確診人數(shù)栅盲,見到最多的就是中國地圖的分布圖猪狈,由于工作需要,自己也使用echarts實(shí)現(xiàn)了一個(gè)陈醒。效果如下:
一:認(rèn)識(shí)echarts
ECharts惕橙,縮寫來自 Enterprise Charts,商業(yè)級數(shù)據(jù)圖表钉跷,是百度的一個(gè)開源的數(shù)據(jù)可視化工具弥鹦,一個(gè)純 Javascript 的圖表庫。目前很多商業(yè)項(xiàng)目都在使用爷辙,不但好用而且是免費(fèi)惶凝。
二:實(shí)現(xiàn)步驟
1.官網(wǎng)上面有很多實(shí)例可供大家參考吼虎,這個(gè)是地圖實(shí)例的鏈接:https://www.echartsjs.com/examples/en/editor.html?c=doc-example/map-visualMap-pieces&edit=1
2.在頁面左側(cè)框中輸入以下數(shù)據(jù):
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: '確診數(shù)',
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: '內(nèi)蒙古',
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: '臺(tái)灣',
value: 10
}, {
name: '香港',
value: 15
}, {
name: '澳門',
value: 9
}
]
}
]
};
此時(shí)頁面右側(cè)就會(huì)渲染出中國疫情地圖了。以上是Echarts的Example環(huán)境苍鲜,真實(shí)項(xiàng)目中需要加入china.js。
3.在自己的項(xiàng)目中如何使用echarts實(shí)現(xiàn)疫情圖玷犹,靜態(tài)頁面代碼如下:
<!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>
<!--引入中國的地圖數(shù)據(jù)js文件混滔,引入后會(huì)自動(dòng)注冊地圖名字和數(shù)據(jù)-->
<script src="https://www.echartsjs.com/examples/vendors/echarts/map/js/china.js?_v_=1578305236132"></script>
</head>
<body>
<!--為echarts準(zhǔn)備一個(gè)dom容器-->
<div id="myEcharts"></div>
<script>
//初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('myEcharts'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
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: '確診數(shù)',
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: '內(nèi)蒙古',
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: '臺(tái)灣',
value: 10
}, {
name: '香港',
value: 15
}, {
name: '澳門',
value: 9
}
]
}
]
};
//使用指定的配置項(xiàng)和數(shù)據(jù)顯示圖表
myChart.setOption(option);
</script>
</body>
</html>
4.數(shù)據(jù)調(diào)取
數(shù)據(jù)使用騰訊的數(shù)據(jù):接口地址:https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5&callback=jQuery34102581268431257997_1582545445186&_=1582545445187
拿到數(shù)據(jù)后,發(fā)現(xiàn)數(shù)據(jù)格式是這樣子的:
這個(gè)數(shù)據(jù)是騰訊根據(jù)自己的需求組裝好的數(shù)據(jù)格式歹颓,我們需要用到的是areaTree下面的children坯屿。拿到數(shù)據(jù)后我們需要處理成圖表需要的數(shù)據(jù)格式。需要的格式是這樣子的:
[{
name: '北京11',
value: 212
}, {
name: '天津',
value: 60
}]
直接上對接數(shù)據(jù)后的代碼:
<!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>
<!--引入中國的地圖數(shù)據(jù)js文件巍扛,引入后會(huì)自動(dòng)注冊地圖名字和數(shù)據(jù)-->
<script src="https://www.echartsjs.com/examples/vendors/echarts/map/js/china.js?_v_=1578305236132"></script>
</head>
<body>
<div class="container">
<h3>累計(jì)確診人數(shù)如下:</h3>
<!--為echarts準(zhǔn)備一個(gè)dom容器-->
<div id="myEcharts"></div>
</div>
<script>
//初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('myEcharts'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
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: '確診數(shù)',
type: 'map',
mapType: 'china',
roam: false,
label: {
show: true,
color: 'rgb(249, 249, 249)'
},
data: []
}
]
};
//使用指定的配置項(xiàng)和數(shù)據(jù)顯示圖表
myChart.setOption(option);
//獲取數(shù)據(jù)
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的數(shù)據(jù)格式為:
// [{
// name: '北京11',
// value: 212
// }, {
// name: '天津',
// value: 60
// }]
if (res) {
//獲取到各個(gè)省份的數(shù)據(jù)
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))
//使用指定的配置項(xiàng)和數(shù)據(jù)顯示圖表
myChart.setOption({
series: [
{
name: '確診數(shù)',
type: 'map',
mapType: 'china',
roam: false,
label: {
show: true,
color: 'rgb(249, 249, 249)'
},
data: newArr
}
]
});
}
}
})
}
getData();
</script>
</body>
</html>
三:知識(shí)點(diǎn)解析:
option參數(shù)的含義:
- title:顯示圖標(biāo)的標(biāo)題
- tooltip:展示提示框领跛,當(dāng)你鼠標(biāo)點(diǎn)擊某個(gè)省份時(shí)用來展示對應(yīng)的確診人數(shù)
- legend:圖例,設(shè)置圖例展示的位置
- visualMap:視覺映射撤奸,每個(gè)顏色代表什么含義
- series:地圖數(shù)據(jù)可視化吠昭,添加data數(shù)據(jù)
最后再給大家一個(gè)友好建議:
1、插件自帶的地圖省份名字是默認(rèn)出現(xiàn)在省會(huì)城市的位置胧瓜,導(dǎo)致很多省份的名字有點(diǎn)擠甚至偏移矢棚,大家可以打開map/js/china.js
2、檢索自己想要更改的省份名字府喳,如湖南
"properties":{"cp":[112.982279,28.19409],"name":"湖南","childNum":3}}
其中cp即表示文字的位置蒲肋,兩個(gè)坐標(biāo)表示經(jīng)緯度,大家根據(jù)需要調(diào)整钝满。有興趣的小伙伴可以試試哦兜粘!
對echarts還不熟悉的同學(xué)可以先看一遍官方教程哦,地址如下:https://www.echartsjs.com/zh/tutorial.html
疫情中一個(gè)個(gè)感人的瞬間,每天都是滿滿的感動(dòng)弯蚜,太多感謝的話都會(huì)顯得那么蒼白無力孔轴,只希望疫情趕快過去。
更新了2022熟吏。距糖。。牵寺。悍引。。帽氓。趣斤。。黎休。浓领。玉凯。。联贩。漫仆。。最近很多人說地圖出不來了泪幌,所以補(bǔ)充一下
由于echarts之前的官網(wǎng)不能訪問了盲厌,所以之前引用的地址無法訪問了,現(xiàn)做了如下調(diào)整供大家參考:
之前的china.js無法訪問了祸泪,我網(wǎng)上找了一個(gè)吗浩,下載下來然后在頁面引用,china.js里面亂碼不用管没隘。
鏈接: https://pan.baidu.com/s/1uE3VpxRuNX_IRDVA_ElsBA 提取碼: 3nh8
<!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>
<!-- 引入 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<!--引入中國的地圖數(shù)據(jù)js文件懂扼,引入后會(huì)自動(dòng)注冊地圖名字和數(shù)據(jù)-->
<script src="./china.js"></script>
</head>
<body>
<div class="container">
<h3>新增確診人數(shù)如下:</h3>
<!--為echarts準(zhǔn)備一個(gè)dom容器-->
<div id="myEcharts"></div>
</div>
<script>
//初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById("myEcharts"));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
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: [],
},
],
};
//使用指定的配置項(xiàng)和數(shù)據(jù)顯示圖表
myChart.setOption(option);
//獲取數(shù)據(jù)
function getData() {
// 看這里看這里看這里看這里看這里看這里看這里看這里看這里看這里看這里
// https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=provinceCompare
// 由于這個(gè)地址訪問存在跨域問題,目前將上面的url放到瀏覽器去訪問右蒲,然后將數(shù)據(jù)復(fù)制出來使用
var data = {
ret: 0,
info: "",
data: {
provinceCompare: {
黑龍江: {
nowConfirm: 44,
confirmAdd: 52,
dead: 0,
heal: 8,
zero: 0,
},
天津: { nowConfirm: 0, confirmAdd: 4, dead: 0, heal: 4, zero: 0 },
山東: {
nowConfirm: 72,
confirmAdd: 82,
dead: 0,
heal: 10,
zero: 0,
},
新疆: {
nowConfirm: 5,
confirmAdd: 23,
dead: 0,
heal: 18,
zero: 0,
},
澳門: { nowConfirm: 1, confirmAdd: 1, dead: 0, heal: 0, zero: 0 },
福建: {
dead: 0,
heal: 7,
zero: 0,
nowConfirm: 59,
confirmAdd: 66,
},
青海: { nowConfirm: 2, confirmAdd: 5, dead: 0, heal: 3, zero: 0 },
上海: {
heal: 11,
zero: 0,
nowConfirm: 9,
confirmAdd: 20,
dead: 0,
},
內(nèi)蒙古: {
nowConfirm: 13,
confirmAdd: 107,
dead: 0,
heal: 94,
zero: 0,
},
江蘇: {
confirmAdd: 32,
dead: 0,
heal: 54,
zero: 0,
nowConfirm: -22,
},
貴州: {
nowConfirm: 8,
confirmAdd: 20,
dead: 0,
heal: 12,
zero: 0,
},
陜西: {
confirmAdd: 35,
dead: 0,
heal: 54,
zero: 0,
nowConfirm: -19,
},
山西: {
nowConfirm: 96,
confirmAdd: 185,
dead: 0,
heal: 89,
zero: 0,
},
河南: {
nowConfirm: 76,
confirmAdd: 133,
dead: 0,
heal: 57,
zero: 0,
},
廣西: { nowConfirm: 4, confirmAdd: 5, dead: 0, heal: 1, zero: 0 },
甘肅: {
nowConfirm: -5,
confirmAdd: 1,
dead: 0,
heal: 6,
zero: 0,
},
臺(tái)灣: {
nowConfirm: 17260,
confirmAdd: 17281,
dead: 21,
heal: 0,
zero: 0,
},
四川: {
nowConfirm: 77,
confirmAdd: 174,
dead: 0,
heal: 97,
zero: 0,
},
西藏: {
nowConfirm: -8,
confirmAdd: 1,
dead: 0,
heal: 9,
zero: 0,
},
遼寧: {
heal: 14,
zero: 0,
nowConfirm: 23,
confirmAdd: 37,
dead: 0,
},
吉林: { nowConfirm: 6, confirmAdd: 8, dead: 0, heal: 2, zero: 0 },
寧夏: { confirmAdd: 0, dead: 0, heal: 0, zero: 3, nowConfirm: 0 },
河北: {
nowConfirm: -72,
confirmAdd: 17,
dead: 0,
heal: 89,
zero: 0,
},
重慶: {
dead: 0,
heal: 180,
zero: 0,
nowConfirm: -12,
confirmAdd: 168,
},
香港: {
nowConfirm: 665,
confirmAdd: 945,
dead: 13,
heal: 267,
zero: 0,
},
云南: {
heal: 33,
zero: 0,
nowConfirm: 87,
confirmAdd: 120,
dead: 0,
},
安徽: {
nowConfirm: 12,
confirmAdd: 13,
dead: 0,
heal: 1,
zero: 0,
},
廣東: {
nowConfirm: 301,
confirmAdd: 1529,
dead: 0,
heal: 1228,
zero: 0,
},
江西: { nowConfirm: 1, confirmAdd: 1, dead: 0, heal: 0, zero: 0 },
浙江: {
confirmAdd: 91,
dead: 0,
heal: 39,
zero: 0,
nowConfirm: 52,
},
北京: {
nowConfirm: 799,
confirmAdd: 1285,
dead: 0,
heal: 486,
zero: 0,
},
海南: {
zero: 0,
nowConfirm: 5,
confirmAdd: 15,
dead: 0,
heal: 10,
},
湖北: {
heal: 3,
zero: 0,
nowConfirm: 18,
confirmAdd: 21,
dead: 0,
},
湖南: {
nowConfirm: 39,
confirmAdd: 48,
dead: 0,
heal: 9,
zero: 0,
},
},
},
};
var newArr = [];
//獲取到各個(gè)省份的數(shù)據(jù)sss
var province = data.data.provinceCompare;
for (var key in province) {
var json = {
name: key,
value: province[key].confirmAdd,
};
newArr.push(json);
}
console.log(newArr);
//使用指定的配置項(xiàng)和數(shù)據(jù)顯示圖表
myChart.setOption({
series: [
{
name: "確診數(shù)",
type: "map",
mapType: "china",
roam: false,
label: {
show: true,
color: "rgb(249, 249, 249)",
},
data: newArr,
},
],
});
}
getData();
</script>
</body>
</html>