vue3中使用echarts绘制中国地图

1.创建容器放置地图

<div ref="chart" style="width:100%;height:600px"></div>

2.引入地图资源及数据

3.初始化init方法，并设置配置项

setup(){
        const state = reactive({ 
           chart:ref()
        })
        const methods = {
            init(){
                let myChart = echarts.init(state.chart);
                let option = {
                    //数据分段
                    visualMap: {  
                        type:'piecewise',
                        show : true,  
                        splitList: [   
                            {start: 500, end:600},{start: 400, end: 500},  
                            {start: 300, end: 400},{start: 200, end: 300},  
                            {start: 100, end: 200},{start: 0, end: 100},  
                        ],  
                        color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea'],
                        itemWidth: 8,
                        itemHeight: 8
                    },  
                    
                    //配置属性
                    series: [{  
                        type: 'map',
                        map:'china',
                        roam: true,  
                        label: {  
                            color:'red',
                            fontSize:10,
                            normal: {  
                                show: true  //省份名称  
                            },  
                            emphasis: {  
                                show: false  
                            }  
                        }, 
                        itemStyle:{
                            borderColor:'#fff',
                            borderWidth:1,
                        },
                        zoom:1.2,    // 控制地图的放大缩小
                        emphasis:{   //高亮状态下的多边形和标签样式
                            // 控制地图滑过后的颜色
                            label:{
                                color:'#fff',
                                fontSize:12
                            },
                            itemStyle:{  
                                areaColor:'#1bc1ad',
                                borderColor:'blue'
                            }
                        },
                        data:mapData  //数据
                    }] 
                }
                myChart.setOption(option)
            }
        }
        onMounted(()=>{
            methods.init();
        })
        return {...toRefs(state),...methods}
    }

 4.mapData数据

const mapData = [  
    {name: '北京',value: randomData() },{name: '天津',value: randomData() },  
    {name: '上海',value: randomData() },{name: '重庆',value: randomData() },  
    {name: '河北',value: randomData() },{name: '河南',value: randomData() },  
    {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },  
    {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },  
    {name: '安徽',value: randomData() },{name: '山东',value: randomData() },  
    {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },  
    {name: '浙江',value: randomData() },{name: '江西',value: randomData() },  
    {name: '湖北',value: randomData() },{name: '广西',value: randomData() },  
    {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },  
    {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },  
    {name: '吉林',value: randomData() },{name: '福建',value: randomData() },  
    {name: '贵州',value: randomData() },{name: '广东',value: randomData() },  
    {name: '青海',value: randomData() },{name: '西藏',value: randomData() },  
    {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },  
    {name: '海南',value: randomData() },{name: '台湾',value: randomData() },  
    {name: '香港',value: randomData() },{name: '澳门',value: randomData() }  
];

function randomData(){
   return Math.round(Math.random()*500); 
}

5.最终效果