vue使用echarts中国地图

需求：Vue3 + vite +TS 项目内使用 Echarts 5 绘制中国地图。鼠标悬浮省份上面显示指定的数据，地图支持缩放和拖拽的功能，页面放大缩小支持自适应，window.addEventListener(‘resize’, resize); 添加防抖动函数debounce。

一、安装 Echarts

npm install echarts --save

安装成功后如下：

二、下载地图的 json 数据

免费的文件下载地址：

http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

三、具体代码如下

1，chinaMap.vue组件如下：

<template>
   <div class="leftCard">
    <div id="chinaMap" ref="chinaMap"></div>
  </div>
</template>

<script setup lang="ts" name="ChinaMap">
import { reactive, onMounted, onBeforeUnmount, nextTick, ref, watch } from 'vue';
import * as echarts from 'echarts';
import china from "./china.json";  //中国地图
import { debounce } from 'lodash-es';
const chinaMap = ref()
var myChart = {} as any
const resize = debounce(() => myChart && myChart.resize(), 200)
const props = defineProps({
  areadataInfo: {
    type: Array,
    default: () => []
  }
});
const state = reactive({
  MapDataList: [
    {
      name: "黑龙江省",
      value: 44,
      randomCount: 80,
      relCenterCount: '80/1092',
      relDoctorCount: '80/1223',
      perf: "1%",
      rank: ''
    },
    {
      name: "湖南省",
      value: 23,
      randomCount: 100,
      relCenterCount: '100/1092',
      relDoctorCount: '100/1223',
      perf: "70%",
      rank: 'Top2'
    },
    {
      name: "云南省",
      value: 88,
      randomCount: 180,
      relCenterCount: '187/1092',
      relDoctorCount: '190/1223',
      perf: "80%",
      rank: 'Top1'
    },
    {
      name: "安徽省",
      value: 66,
      randomCount: 90,
      relCenterCount: '157/1092',
      relDoctorCount: '188/1223',
      perf: "60%",
      rank: 'Top3'
    },
    {
      name: "新疆维吾尔自治区",
      value: 166,
      randomCount: 90,
      relCenterCount: '157/1092',
      relDoctorCount: '188/1223',
      perf: "60%",
      rank: 'Top001'
    },
    {
      name: "内蒙古自治区",
      value: 106,
      randomCount: 90,
      relCenterCount: '157/1092',
      relDoctorCount: '188/1223',
      perf: "60%",
      rank: 'Top002'
    }
  ] as any
});
watch(
  () => props.areadataInfo,
  (newProps) => {
    if (newProps) {
      state.MapDataList = newProps
      nextTick(() => {
        initEchartMap();
      });
    }
  },
  { immediate: true, deep: true }
);
const emit = defineEmits(['MaphospitalRecommend']);

onMounted (() => {
  window.addEventListener('resize', resize);
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resize);
})

// 初始化地图
function initEchartMap(){
    echarts.registerMap('china', china) //这个特别重要
    if (myChart != null && myChart != "" && myChart != undefined) {
    echarts.dispose(chinaMap.value)
    }
    myChart = echarts.init(chinaMap.value);
    myChart.off('click');
    //echart 配制option  
    var options= {
        tooltip: { // 鼠标移到图里面的浮动提示框
        // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
        formatter(params, ticket, callback) {
            // params.data 就是series配置项中的data数据遍历
            let patienticfVal, randomCount, relCenterCount, relDoctorCount, areaName, rank
            if (params.data) {
                patienticfVal = params.data.icfCount;
                randomCount = params.data.randomCount;
                relCenterCount = params.data.relCenterCount;
                relDoctorCount = params.data.relDoctorCount;
                areaName = params.data.areaName;
                rank = 'Top' + params.data.rank;
            } else {// 为了防止没有定义数据的时候报错写的
                patienticfVal = 0;
                randomCount = 0;
                relCenterCount = 0;
                relDoctorCount = 0;
                rank = '';
            }
            let htmlStr = `
 ${areaName ? areaName : params.name} ${rank} 
患者ICF数：${patienticfVal}

患者入组数：${randomCount}

覆盖医院：${relCenterCount}

覆盖医生：${relDoctorCount}
`;
return htmlStr;
},
backgroundColor: "#ff7f50", //提示标签背景颜色
textStyle: { color: "#fff" }, //提示标签字体颜色
padding: [5, 10, 0, 10], // 设置上下的内边距为 5,0，左右的内边距为 10
},
visualMap: {
show: true,
bottom: 20,
left: 50,
// left: 50, top: '30%', right: 0, bottom: 0, //定位的左上角以及右下角分别所对应的经纬度
text: ['高', '低'],
min: 0,
itemHeight: 200, //图形的高度，即长条的高度。
color: [
'#ee6666',//红色
'#fc8452',//橙色
'#fac858',//黄色
'#9a60b4',//紫色
'#ea7ccc',//淡紫
'#3ba272',//绿色
'#91cc75',//浅绿
'#5470c6',//蓝色
'#5283e7',//淡蓝
]
},
geo: { // 地理坐标系组件用于地图的绘制// geo配置详解： https://echarts.baidu.com/option.html#geo
map: "china", // 表示中国地图
roam: true, // 是否开启鼠标缩放和平移漫游
// roam : 'scale',
scaleLimit: { //滚轮缩放的极限控制
min: 1,
max: 12
},
zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
label: {
show: false
},
itemStyle: {
normal: {
areaColor: "#d5e8f3",
borderColor: "#fcfdfe",
borderWidth: 1,
},
emphasis: {
areaColor: "#aaa",
},
},
// emphasis: { // 地图区域的多边形 图形样式。
// borderColoer: "#ffffff",//未选中的状态
// areaColor: "#D8E9FD", //背景颜色
// label: {
// show: true, //显示名称
// },
// itemStyle: { //选中的状态// 高亮状态下的多边形和标签样式
// shadowBlur: 20,
// shadowColor: "rgba(0, 0, 0, 0.5)",
// borderColoer: "#fff",
// areaColor: "#DA3A3A"
// }
// }
},
series: [
{
name: "地图", // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
type: "map",
geoIndex: 0,
label: {
show: true,
},
// 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接（下面是我定义的假数据）
data: state.MapDataList,
}
]
}
myChart.clear();
myChart.setOption(options);
// window.addEventListener('resize', () => {
// if (myChart) {
// myChart.resize();
// }
// });
// myChart.resize();
//地图的点击事件 ，钻取到市我就不举例了，类似的方法，点击事件可以获取到当前点击的省份的数据；
myChart.on('click', function(params) {
// console.log(params, '---点击地图---')
emit('MaphospitalRecommend', params);
})
// myChart.on('mouseover', function(params) {
// console.log(params, '---鼠标移入---')
// })
// myChart.on('mouseout', function(params) {
// console.log(params, '---鼠标移出---')
// })
}
</script>
<style scoped lang="scss">
.leftCard{
width: 100%;
height: 100%;
#chinaMap{
width: 100%;
height: 600px;
}
}
</style>