Vue3+TS+ECharts5实现中国地图数据信息显示

1.引言

最近在做一个管理系统，主要技术栈使用的是Vue3+TS+Vite+ElementPlus，主要参考项目是yudao-ui-admin-vue3，其中用到ECharts5做数字大屏，展示中国地图相关信息，以此基础做一个分享，写下这篇文章。

"dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "@kjgl77/datav-vue3": "^1.6.1",
    "@vueuse/core": "^10.2.1",
    "echarts": "^5.4.2",
    "echarts-wordcloud": "^2.1.0",
    "element-plus": "2.3.7",
    "vue": "3.3.4",
    "vue-i18n": "9.2.2",
    "vue-router": "^4.2.4",
    "vue-types": "^5.1.0",
    "vuedraggable": "^4.1.0"
  }

在读这篇文章之前，建议先读一下自适应大屏容器组件这篇文章。

2.封装ECharts组件

通常在实际项目中，需要用到ECharts图表的地方肯定很多，我们可以封装一个ECharts组件，方便使用，这里在 yudao-ui-admin-vue3基础上，添加了一个响应式变量，为了在引用ECharts父组件中获取到ECharts初始化实例，在地图中自动随机显示各省份数据的函数中使用。

为什么要添加这个响应式变量了？我实际使用中遇到的问题，如果把ECharts初始化实例赋值为响应式变量，会导致tooltip提示框在设置trigger: ‘axis’显示不出来，如果赋值为非响应式变量，父组件接受变量时数据为空，拿不到数据，所以我的解决办法是添加一个响应式变量，这样双方都可以满足。

3.数据的准备

数据主要分为ECharts5需要的中国地图数据，需要显示的自定义数据，以及各个省份的中心经纬度数据。

1.地图数据。由于ECharts5地图不能直接引入，需要自己下载JSON数据，然后引入。地图数据下载地址为阿里云数据可视化平台，下载JSON数据，可根据自己的需要对南海诸岛的数据做编辑。数据下载后，放入asserts目录中，引入。

2.自定义显示数据。自定义显示数据就是想要在地图上显示的信息，当鼠标点击某个省份后，tooltip显示框显示的数据内容。本地中，显示的数据为各个省份合同数以及合同金额，如下图所示。

数据格式为：

interface digitalScreenDataType {
  name: string
  value: number
}
interface contractInfoForFirstArea {
  name: string
  contractInfoByFirstArea: digitalScreenDataType[]
}

数据内容举例：

[
    {
      name: '北京市',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 0.9923 },
        { name: '合同总数', value: 51 }
      ]
    },
    {
      name: '天津市',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 170.2683 },
        { name: '合同总数', value: 30790 }
      ]
    }
]

3.各个省份的中心经纬度数据。此数据主要为了显示各省份的中心点，利用的ECharts的配置，可以让中心点具有不同的显示效果。ECharts文档传送门。

数据定义：

const geoCodeMap = [
  { name: '北京市', delay: 63, lossPercent: 2, value: [119.337634104, 26.0911937119] },
  { name: '天津市', delay: 63, lossPercent: 2, value: [117.190182, 39.125596] },
  { name: '河北省', delay: 63, lossPercent: 2, value: [114.502461, 38.045474] },
  { name: '山西省', delay: 63, lossPercent: 2, value: [112.549248, 37.857014] },
  { name: '内蒙古自治区', delay: 63, lossPercent: 2, value: [111.670801, 40.818311] },
  { name: '辽宁省', delay: 63, lossPercent: 2, value: [123.429096, 41.796767] },
  { name: '吉林省', delay: 63, lossPercent: 2, value: [125.3245, 43.886841] },
  { name: '黑龙江省', delay: 63, lossPercent: 2, value: [126.642464, 45.756967] },
  { name: '上海市', delay: 63, lossPercent: 2, value: [121.487899486, 31.24916171] },
  { name: '江苏省', delay: 63, lossPercent: 2, value: [118.767413, 32.041544] },
  { name: '浙江省', delay: 63, lossPercent: 2, value: [120.153576, 30.287459] },
  { name: '安徽省', delay: 63, lossPercent: 2, value: [117.283042, 31.86119] },
  { name: '福建省', delay: 63, lossPercent: 2, value: [119.306239, 26.075302] },
  { name: '江西省', delay: 63, lossPercent: 2, value: [115.892151, 28.676493] },
  { name: '山东省', delay: 63, lossPercent: 2, value: [117.000923, 36.675807] },
  { name: '河南省', delay: 63, lossPercent: 2, value: [113.665412, 34.757975] },
  { name: '湖北省', delay: 63, lossPercent: 2, value: [114.298572, 30.584355] },
  { name: '湖南省', delay: 63, lossPercent: 2, value: [112.982279, 28.19409] },
  { name: '广东省', delay: 63, lossPercent: 2, value: [113.280637, 23.125178] },
  { name: '广西壮族自治区', delay: 63, lossPercent: 2, value: [108.320004, 22.82402] },
  { name: '海南省', delay: 63, lossPercent: 2, value: [110.33119, 20.031971] },
  { name: '重庆市', delay: 63, lossPercent: 2, value: [106.504962, 29.533155] },
  { name: '四川省', delay: 63, lossPercent: 2, value: [104.065735, 30.659462] },
  { name: '贵州省', delay: 63, lossPercent: 2, value: [106.713478, 26.578343] },
  { name: '云南省', delay: 63, lossPercent: 2, value: [102.712251, 25.040609] },
  { name: '西藏自治区', delay: 63, lossPercent: 2, value: [91.132212, 29.660361] },
  { name: '陕西省', delay: 63, lossPercent: 2, value: [108.948024, 34.263161] },
  { name: '甘肃省', delay: 63, lossPercent: 2, value: [103.823557, 36.058039] },
  { name: '青海省', delay: 63, lossPercent: 2, value: [96.07, 36.62] },
  { name: '宁夏回族自治区', delay: 63, lossPercent: 2, value: [106.278179, 38.46637] },
  { name: '新疆维吾尔自治区', delay: 63, lossPercent: 2, value: [87.617733, 43.792818] },
  { name: '台湾省', delay: 63, lossPercent: 2, value: [121.509062, 25.044332] },
  { name: '香港特别行政区', delay: 63, lossPercent: 2, value: [114.173355, 22.320048] },
  { name: '澳门特别行政区', delay: 63, lossPercent: 2, value: [113.54909, 22.198951] }
]

配置项：

{
      type: 'effectScatter',
      coordinateSystem: 'geo',
      symbolSize: 7,
      effectType: 'ripple',
      legendHoverLink: false,
      showEffectOn: 'render',
      rippleEffect: {
        period: 4,
        scale: 2.5,
        brushType: 'stroke'
      },
      zlevel: 1,
      itemStyle: {
        color: '#99FBFE',
        shadowBlur: 5,
        shadowColor: '#fff'
      },
      data: geoCodeMap
    }

4.地图展示组件

/** * @LeftTop.vue * @author: zgr * @createTime: 2023/9/25 */

几个需要说明的地方：

1.option配置中的显示数据。本例中，数据直接写死赋值，在实际使用中，我们可能是从后端异步拉取数据然后再显示，这就会有一个问题，组件加载完毕，数据却还没有获取完毕。本人在实际项目的办法是初始化一个定时器，1秒钟获取一次数据，如果加载到数据就销毁定时器，继续赋值给option中的数据。

const getData = async () => {
  let resData: contractInfoForFirstArea[] = digitalScreenStore.getContractInfoForFirstArea
  if (resData.length > 0 && timer.initDataTimer !== null) {
    // 清除多次执行定时器
    clearInterval(Number(timer.initDataTimer))
    timer.initDataTimer = null
  }
  dataList.value = resData
  options.series[0].data = resData
}


const getInitDataTimer = () => {
  timer.initDataTimer = setInterval(getData, 1000)
}

onMounted(() => {
  getInitDataTimer()
  getData()
})

2.tooltip中的formatter函数。如果简单的字符串满足不了显示数据的要求，可以自定义函数，返回一段自定义HTML，显示对应数据。

3.自动随机选择省份区域，并显示tooltip数据。主要为三个函数，handleMapRandomSelect，reSelectMapRandomArea，startInterval，最初引用链接为koi-screen Vue2版，ECharts5的配置也有一些变化，所以改进为现在的Vue3+ECharts5版。

5.总结

本篇文章简单介绍了ECharts组件的封装，以及地图组件的封装，大概描述了实际项目中遇到的问题以及自己的一些解决办法，行文比较简单概括，所给代码并不能达到文章开始图片效果，对于一些问题可能还不是能很好的理解，欢迎批评指正，一起探讨交流进步。