用echarts实现新型肺炎全国疫情地图

引入vue.min.js、echarts.min.js和china.js
代码

            setAreaChart() {
                var dom = document.getElementById("areaChart");
                var myChart = echarts.init(dom);
                var option = {
                    visualMap: {
                        show: true,
                        type: 'piecewise',
                        splitNumber: 4,
                        itemWidth:20,                  
                        itemHeight:10,
                        itemGap:5,
                        textStyle:{
                            color:'#999'
                        },
                        pieces: [
                            {min: 1000,color:'#7D1818',label:'>=1000人'},
                            {min: 100, max: 999,color:'#BF2321',label:'100-999人'},
                            {min: 10, max: 99, color:'#FF7B66',label:'10-99人'},
                            {min: 1, max: 9, color: '#FFA789',label:'1-9人'},
                        ],
                    },
                    series: [
                        {
                            name: '',
                            type: 'map',
                            mapType: 'china',
                            roam: false,
                            zoom: 1.2,
                            itemStyle: {
                                normal: { label: { show: true } },
                                emphasis: { label: { show: true } }
                            },
                            label: {
                                normal: {
                                    textStyle: {
                                        fontSize: 7,
                                        color: '#333'
                                    }
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data: this.chartData,
                        }
                    ]
                };
                myChart.setOption(option);
            },

chartData里的数据

[{"name":"湖北","value":67799},{"name":"广东","value":1364},{"name":"河南","value":1273},{"name":"浙江","value":1232},{"name":"湖南","value":1018},{"name":"安徽","value":990},{"name":"江西","value":935},{"name":"山东","value":761},{"name":"江苏","value":631},{"name":"重庆","value":576},{"name":"四川","value":539},{"name":"黑龙江","value":482},{"name":"北京","value":456},{"name":"上海","value":358},{"name":"河北","value":318},{"name":"福建","value":296},{"name":"广西","value":253},{"name":"陕西","value":246},{"name":"云南","value":176},{"name":"海南","value":168},{"name":"香港","value":157},{"name":"贵州","value":146},{"name":"天津","value":136},{"name":"山西","value":133},{"name":"甘肃","value":133},{"name":"辽宁","value":125},{"name":"吉林","value":93},{"name":"台湾","value":77},{"name":"新疆","value":76},{"name":"内蒙古","value":75},{"name":"宁夏","value":75},{"name":"青海","value":18},{"name":"澳门","value":12},{"name":"西藏","value":1}]

效果图

项目地址：https://ncov.echodata.cn/page/index.html