基于Echarts的新型冠状病毒感染疫情地图

核心源码：

function init(mydata, province_index) {
        var optionMap = {
            backgroundColor: '#fff',
            tooltip: {
                trigger: 'item',
                textStyle: {
                    fontSize: 14
                },
                formatter: function(val) {   //灰色弹框显示的数据格式
                    return '省份：' + val.data.name + '<br/>' + '确诊人数：' + val.data.value + '<br/>' + '死亡人数：' + val.data.deadCount
                }
            },
            //左侧小导航图标
            visualMap: {
                show: true,
                left: 0,
                bottom: 0,

                pieces: [{ //配置区间
                        gt: 1000,
                    },
                    {
                        min: 1,
                        max: 9
                    }, {
                        min: 10,
                        max: 99
                    }, {
                        min: 100,
                        max: 499
                    },
                    {
                        min: 500,
                        max: 1000
                    },
                    {
                        min: 1000,
                        max: 5000
                    },
                ],
                textStyle: {
                    fontSize: 8
                },
                inverse: true,
                itemWidth: 20,
                itemHeight: 10,
                padding: 3,
                color: ['#79360d', '#b25014', '#e58221', '#ffab78', '#fbc9aa', '#fae3cf'], //区间背景颜色显示
                formatter: function(value) { //区间数据显示格式
                    if (value == 100) {
                        return value + '-' + 499 + '人';
                    } else if (value == 500) {
                        return value + '-' + 999 + '人';
                    } else if (value == 1000) {
                        return value + '-' + 4999 + '人';
                    } else if (value == 5000) {
                        return '5000人以上';
                    } else {
                        return value + '-' + (value * 10 - 1) + '人';
                    }
                }
            },
            geo: {
                show: true,
                roam: 'false',
            },
                //配置属性
            series: [{
                name: '省份',
                type: 'map',
                mapType: 'china',
                roam: false,
                zoom: 1.2,
                label: {
                    show: true,
                    textStyle: {
                        fontWeight: 400,
                        fontSize: 20, //文字的字体大小
                        color: '#000',
                    },
                    emphasis: {
                        show: false
                    },
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            fontSize: 8
                        }
                    },
                    emphasis: {
                        areaColor: '#f4eba2', //选中背景色
                        borderColor: '#999',
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 10,
                        label: {
                            show: true,
                            fontSize: 8
                        }
                    },
                },
                data: mydata //数据
            }]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        //使用制定的配置项和数据显示图表
        myChart.setOption(optionMap);
        myChart.dispatchAction({  //配置默认选中
            type: "showTip", // 根据 tooltip 的配置项显示提示框。
            seriesIndex: 0,
            dataIndex: province_index
        });

        myChart.on("mouseover", function(e) {
            if (e.dataIndex != province_index) {
                myChart.dispatchAction({
                    type: "downplay", // 根据 tooltip 的配置项显示提示框。
                    seriesIndex: 0,
                    dataIndex: province_index
                });
            }
        });

预览：

新型冠状病毒中国疫情预览
源码移步github : https://github.com/Mstian/YiqingMap.git；
如果代码对您有用留下您的足迹，给个赞，给个star，谢谢哦！！！