TIP

vue3使用echarts显示重庆地图

安装echarts

yarn add echarts 
#或
npm i echarts -S

下载地图json数据

这里直接使用阿里现成的，也可以用其它地图开放平台的接口请求数据 选择下载地图json数据

使用

普通使用方式

<div ref="myChart"></div>

// script setup
import { ref, onMounted, markRaw } from 'vue';
import * as echarts from 'echarts'
import chongqingJson from '@/assets/chongqing.json'; // 下载的地图数据
let mapChartInstance = null;
onMounted(() => {
  mapChartInstance = markRaw(
    echarts.init(mapChart.value, undefined, { devicePixelRatio: 2, renderer: 'svg' })
  );
  echarts.registerMap('chongqing', chongqingJson as any); // 注册地图
  mapChartInstance.setOption({
     tooltip: {
        show: false, //不显示提示标签
        formatter: '{b}', //提示标签格式
        backgroundColor: '#ff7f50', //提示标签背景颜色
        color: '#fff', //提示标签字体颜色
      },
      geo: {
        map: 'chongqing', // 使用地图
        label: {
          show: false, //显示地域标签
          color: '#ffffff', //标签字体颜色
        },
        layoutCenter: ['50%', '50%'],
        layoutSize: '100%',
        aspectScale: 1, // 缩放
        itemStyle: {
          borderWidth: 2, //区域边框宽度
          borderColor: '#33c9ff', //区域边框颜色
          areaColor: '#1f4e66', //区域颜色
        },
        emphasis: { // 鼠标悬浮效果
          itemStyle: {
            borderWidth: 0.5,
            borderColor: '#33ddff',
            areaColor: '#26627f',
          },
          label: {
            //对应的鼠标悬浮效果
            show: true,
            color: '#ffffff',
          },
        },
      },
  })
})

使用vue-echarts组件

vue-echarts文档

问题记录

• 如何做地图下钻

  答：点击地图块，获取对应地图的geoJSON，然后重新setOption

• 如何做的点击地图下钻后，点击空白处返回

  答：使用vue-charts时监听zr:click事件，如果event.target为null就是点击的空白处，echarts文档，监听‘空白处’事件

• 使用vue-echarts，registerMap注册地图时报错 Implementation of registerMap doesn't exists

  答：

  import { MapChart } from 'echarts/charts';
  import { use, registerMap } from 'echarts/core';
  import chongqingJson from '@/assets/chongqing.json'; // 下载的地图数据
  use([
    MapChart,
  ]);
  // 需在use之后使用
  registerMap('chongqing', chongqingJson)