Vue3 + ECharts 快速实现地图可视化

npm install echarts --save
# or
yarn add echarts

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
// 引入地图数据
import china from '@/assets/map/china.json'
​
const mapRef = ref(null)
let myChart = null
​
// 模拟各省数据
const mapData = [
  { name: '北京市', value: 820 },
  { name: '上海市', value: 750 },
  { name: '广东省', value: 980 },
  { name: '浙江省', value: 680 },
  { name: '江苏省', value: 720 },
  { name: '四川省', value: 540 },
  { name: '山东省', value: 610 },
  { name: '河南省', value: 490 },
  { name: '湖北省', value: 520 },
]
​
onMounted(() => {
  // 注册地图
  echarts.registerMap('china', china)
​
  myChart = echarts.init(mapRef.value)
​
  /** @type {import('echarts').EChartsOption} */
  const option = {
    title: { text: '全国数据分布图', left: 'center' },
    tooltip: { trigger: 'item', formatter: '{b}<br/>数值：{c}' },
    visualMap: {
      min: 0,
      max: 1000,
      left: 20,
      bottom: 20,
      text: ['高', '低'],
      calculable: true,
    },
    series: [
      {
        name: '统计数据',
        type: 'map',
        map: 'china', // 和 registerMap 对应
        roam: true, // 可拖拽缩放
        label: { show: true, fontSize: 10 },
        layoutSize: '95%',
        zoom: 1.1,
        data: mapData,
      },
    ],
  }
​
  myChart.setOption(option)
​
  window.addEventListener('resize', () => myChart.resize())
})
​
onUnmounted(() => {
  window.removeEventListener('resize', () => myChart.resize())
  myChart?.dispose()
})
</script>
​
<template>
  <div ref="mapRef" style="width: 100%; height: 800px"></div>
</template>