vue3+ts+echarts5基本地图下钻~

依靠本地json文件实现省市下钻，有后台的可以改成服务，样式没有，vue3+ts+echarts5，一定要设宽高

html：

 <div @click="back">返回</div>

<div id="echartsMap" style="width: 58%; height: 100%"></div>

 js：

引入

import { reactive, ref, unref, watch, onMounted, nextTick } from 'vue'

import { trackAGG } from '@/api'

import axios from 'axios'

import * as echarts from 'echarts'

import 'echarts/lib/chart/map'

import 'echarts/lib/component/visualMap'

import china from '../../../static/smap/china.json'

 方法： geoIndex: 0,防止生成两个地图，mycharts.registerMap方法的第一个参数一定要一致

const getData = async (code: any) => {

//获取数据

  const res: any = await trackAGG({

    thematic_id: navStore.themId,

    lev: 1,

    code: ''"

  })

  if (res) {

    res.features.forEach((ele: any) => {

      chartData.value.push({

        name: ele.properties.name,

        code: ele.properties.code,

        value: ele.properties.count

      })

    })

  }

}

//名称对照

let shengname = {

  上海市: 'shanghai',

  云南省: 'yunnan',

  内蒙古自治区: 'neimenggu',

  北京市: 'beijing',

  台湾省: 'taiwan',

  吉林: 'jilin',

  四川省: 'sichuan',

  天津市: 'tianjin',

  宁夏回族自治区: 'ningxia',

  安徽省: 'anhui',

  山东省: 'shandong',

  山西省: 'shanxi',

  广东省: 'guangdong',

  广西壮族自治区: 'guangxi',

  新疆维吾尔自治区: 'xinjiang',

  江苏: 'jiangsu',

  江西: 'jiangxi',

  河北省: 'hebei',

  河南: 'henan',

  浙江省: 'zhejiang',

  海南省: 'hainan',

  湖北: 'hubei',

  湖南: 'hunan',

  澳门特别行政区: 'aomen',

  甘肃省: 'gansu',

  福建: 'fujian',

  西藏自治区: 'xizang',

  贵州省: 'guizhou',

  辽宁省: 'liaoning',

  重庆市: 'chongqing',

  陕西省: 'shanxi1',

  青海省: 'qinghai',

  香港特别行政区: 'xianggang',

  黑龙江: 'heilongjiang'

}

var mapStack: any = []

mapStack.push(china) //返回上级所需

let mCharts = ref<any>()

const init = () => {

  // 创建echarts实例对象

  if (!mCharts.value)

    mCharts.value = echarts.init(

      document.getElementById('echartsMap') as HTMLElement

    )

  // 生成地图并使用本地Json地图数据

  echarts.registerMap('chinaMap', china as any)

  let option = {

    visualMap: {

      left: 'right',

      min: 500000,

      max: 38000000,

      inRange: {

        color: [

          '#313695',

          '#4575b4',

          '#74add1',

          '#abd9e9',

          '#e0f3f8',

          '#ffffbf',

          '#fee090',

          '#fdae61',

          '#f46d43',

          '#d73027',

          '#a50026'

        ]

      },

      text: ['High', 'Low'],

      calculable: true

    },

    series: [

      {

        type: 'map',

        roam: true,

        map: 'chinaMap',

        geoIndex: 0,

        emphasis: {

          label: {

            show: true

          }

        },

        data: chartData.value

      }

    ]

  }

  option && mCharts.value.setOption(option)

  window.onresize = function () {

    mCharts.value.resize()

  }

  // 地图点击事件，在这里实现下钻

  mCharts.value.on(

    'click',

    (params: any) => {

      console.log(params)

      // 获取地图点击区域的名字，根据名字请求本地地图Json

      let area = shengname[params.name]

      axios.get(`../../../static/smap/${area}.json`).then((response) => {

        // 重新生成地图的Json数据

        echarts.registerMap('chinaMap', response.data)

        // 记录当前的区域，返回上地图的标识

        if (mapStack.length < 3) {

          mapStack.push(response.data)

        }

        // 使用setOption方法将地图重置为点击的市区

        mCharts.value.setOption({

          geo: {

            type: 'map',

            map: 'chinaMap',

            layoutCenter: ['50%', '50%'],

            layoutSize: '85%'

          }

        })

      })

    },

    250

  )

}

const back = () => {

  mapStack.splice(mapStack.length - 1, 1)

  // 把数组中的最后一个元素注册到地图

  echarts.registerMap('chinaMap', mapStack[mapStack.length - 1])

  mCharts.value.setOption({

    geo: {

      type: 'map',

      map: 'chinaMap'

    }

  })

}

onMounted(async () => {

  init()

  getData('')

})

 从static里引入文件