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文件需要的可以私信我，希望能对大家有所帮助