echarts数据可视化--中国的疫情地图
echarts实现了数据可视化的技术功能，它把抽象的数据转成具体的图形，更直观可视化的展现在用户界面中，下面我就根据中国疫情分布图来熟悉echarts与ajax的联调首先异步数据可视化。
首先在html文件中定义div节点用于展示echarts,并引入相关js文件，便于使用其中api
在入口js文件（index.js）中，通过ajax获取疫情相关的数据
别忘了把获取数据的getData方法放在window.onload中，用于页面加载展示
在回调函数中会返回我们想要的结果
其中showEpidemicMap()方法就是绘制渲染地图的方法
代码如下
//展示中国的疫情地图
function showEpidemicMap(){
let regionSituation = [];
allData.areaTree[0].children.forEach(item => {
regionSituation.push({
name:item.name,
value:item.total.nowConfirm
})
});
let myChart = echarts.init(document.getElementById('map'),'dark');
let options = {
title:{
text:'全国疫情地图',
left:'20px',
top:'20px',
textStyle:{
fontSize:30
}
},
tooltip:{
trigger:'item'
},
visualMap:{
show:true,
x:'left',
y:'bottom',
textStyle:{
fontSize:8,
},
splitList:[
{start:10000},
{start:1000,end:9999},
{start:500,end:999},
{start:100,end:499},
{start:10,end:99},
{start:1,end:9},
{start:0,end:0}
],
color:['#E2EBF4','#FFE7B2','#FFCEA0','#FFA577','#FF6341','#FF2736','#DB1F05'].reverse()
},
series:[
{
name:'现存确诊病例',
type:'map',
mapType:'china',
roam: false,
itemStyle:{
borderWidth:0.5,
borderColor:'#009fe8',
areaColor:'#ffefd5',
emphasis:{
borderWidth: 0.5,
borderColor: '#4b0082',
areaColor: "#fff",
}
},
label: {
normal: {
show: true,
fontSize: 8,
},
emphasis: {
show: true,
fontSize: 10,
}
},
data:regionSituation
},
]
};
myChart.setOption(options);
}复制代码地图需要的数据请求的结果如下
将请求的数据通过map方法遍历，获取到遍历的对象添加到regionSituation数组中，作为echarts中国疫情地图的数据源，myChart是根据定义的div节点初始化的echarts对象,options里面是一些图案的配置选项，其中的series是一系列属性，包括：一组数值，图表类型（series.type），以及其他的关于这些数据如何映射成图的参数。visualMap是视觉映射组件，里面包含地图的方位信息以及一些数据值域信息，它会映射到图像中有数据的值域来展现颜色的变化，也就是疫情在不同地区的严重情况。
最终效果
demo中需要的china.js，echarts.min.js，jquery.min.js文件需要的可以私信我，希望能对大家有所帮助
作者：fby
链接：https://juejin.cn/post/7058640781262716965