基于echarts地图实现点击切换市/区高亮

废话不多说直接上代码
一、index.vue
 

<template>
  <div class="main">
    <div class="home-box">
      <mapEchart />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import mapEchart from '@/components/mapEchart/index.vue'
</script>
<style lang="scss" scoped>
.main {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  .home-box {
    width: 45%;
    height: 60%;
    background-color: red;
  }
}
</style>

二、mapEchart.vue
 

注意: json数据可以在这获取DataV.GeoAtlas地理小工具系列 (aliyun.com)
 

<template>
  <div id="myChart" ref="chartRef" style="width: 100%; height: 100%"></div>
  <div class="btns">
    <button @click="selectArea('南康区')">南康区</button>
    <button @click="selectArea('兴国县')">兴国县</button>
    <button @click="selectArea('瑞金市')">瑞金市</button>
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, onMounted, ref, reactive } from 'vue'
// import nbData from './nb'
import gzData from './gz'
// 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法

const chartRef = ref()
let internalInstance: any = getCurrentInstance()
let echarts = internalInstance.appContext.config.globalProperties.$echarts
let selectedArea = ref<any>(null)
let myChart = ref<any>(null)

const setEcharts = () => {
  const dom = document.getElementById('myChart')
  myChart.value = echarts.init(dom) // 初始化echarts实例
  // debugger
  echarts.registerMap('赣州', getData())
  let data = getData().features.map((item) => {
    return {
      name: item.properties.name
    }
  })

  // const points = [
  //   [121.26, 30.2],
  //   [121.86, 29.83],
  //   [121.53, 29.87],
  //   [121.68, 29.45]
  // ]
  const points = [
    [114.78, 25.67],
    [114.28, 25.67],
    [114.36, 25.39],
    [115.31, 26.36]
  ]
  let option = {
    backgroundColor: '#030528',
    geo: [
      {
        map: '赣州',
        aspectScale: 1,
        zoom: 0.55,
        layoutCenter: ['50%', '50%'],
        layoutSize: '180%',
        show: true,
        roam: false,
        label: {
          emphasis: {
            show: false
          }
        },
        itemStyle: {
          normal: {
            borderColor: '#c0f3fb',
            borderWidth: 1,
            shadowColor: '#8cd3ef',
            shadowOffsetY: 10,
            shadowBlur: 120,
            areaColor: 'transparent'
          }
        }
      },
      // 重影
      {
        type: 'map',
        map: '赣州',
        zlevel: -1,
        aspectScale: 1,
        zoom: 0.55,
        layoutCenter: ['50%', '51%'],
        layoutSize: '180%',
        roam: false,
        silent: true,
        itemStyle: {
          normal: {
            borderWidth: 1,
            // borderColor:"rgba(17, 149, 216,0.6)",
            borderColor: 'rgba(58,149,253,0.8)',
            shadowColor: 'rgba(172, 122, 255,0.5)',
            shadowOffsetY: 5,
            shadowBlur: 15,
            areaColor: 'rgba(5,21,35,0.1)'
          }
        }
      },
      {
        type: 'map',
        map: '赣州',
        zlevel: -2,
        aspectScale: 1,
        zoom: 0.55,
        layoutCenter: ['50%', '52%'],
        layoutSize: '180%',
        roam: false,
        silent: true,
        itemStyle: {
          normal: {
            borderWidth: 1,
            // borderColor: "rgba(57, 132, 188,0.4)",
            borderColor: 'rgba(58,149,253,0.6)',
            shadowColor: 'rgba(65, 214, 255,1)',
            shadowOffsetY: 5,
            shadowBlur: 15,
            areaColor: 'transpercent'
          }
        }
      },
      {
        type: 'map',
        map: '赣州',
        zlevel: -3,
        aspectScale: 1,
        zoom: 0.55,
        layoutCenter: ['50%', '53%'],
        layoutSize: '180%',
        roam: false,
        silent: true,
        itemStyle: {
          normal: {
            borderWidth: 1,
            // borderColor: "rgba(11, 43, 97,0.8)",
            borderColor: 'rgba(58,149,253,0.4)',
            shadowColor: 'rgba(58,149,253,1)',
            shadowOffsetY: 15,
            shadowBlur: 10,
            areaColor: 'transpercent'
          }
        }
      },
      {
        type: 'map',
        map: '赣州',
        zlevel: -4,
        aspectScale: 1,
        zoom: 0.55,
        layoutCenter: ['50%', '54%'],
        layoutSize: '180%',
        roam: false,
        silent: true,
        itemStyle: {
          normal: {
            borderWidth: 5,
            // borderColor: "rgba(11, 43, 97,0.8)",
            borderColor: 'rgba(5,9,57,0.8)',
            shadowColor: 'rgba(29, 111, 165,0.8)',
            shadowOffsetY: 15,
            shadowBlur: 10,
            areaColor: 'rgba(5,21,35,0.1)'
          }
        }
      }
    ],
    series: [
      {
        name: '丹东市数据',
        type: 'map',
        map: '赣州', // 自定义扩展图表类型
        aspectScale: 1,
        zoom: 0.55, // 缩放
        showLegendSymbol: true,
        label: {
          normal: {
            show: true,
            textStyle: { color: '#fff', fontSize: '120%' }
          },
          emphasis: {
            // show: false,
          }
        },
        itemStyle: {
          normal: {
            areaColor: {
              type: 'linear',
              x: 1200,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(3,27,78,0.75)' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(58,149,253,0.75)' // 50% 处的颜色
                }
              ],
              global: true // 缺省为 false
            },
            borderColor: '#fff',
            borderWidth: 0.2
          },
          emphasis: {
            show: false,
            color: '#fff',
            areaColor: 'rgba(0,254,233,0.6)'
          }
        },
        layoutCenter: ['50%', '50%'],
        layoutSize: '180%',
        markPoint: {
          symbol: 'none'
        },
        data: data
      },
      {
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: 'arrow', //箭头图标
          symbolSize: 6 //图标大小
        },
        lineStyle: {
          normal: {
            color: 'rgba(255, 200, 113, 1)',
            width: 2, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: 0.3, //尾迹线条曲直度
            shadowColor: 'rgba(255, 200, 113, 0.2)',
            shadowBlur: 10
          }
        },
        data: [
          [points[0], points[1]],
          [points[0], points[2]],
          [points[0], points[3]]
        ]
      },
      {
        // 动效散点公共配置项
        silent: true, // 暂不支持鼠标交互
        type: 'effectScatter',
        coordinateSystem: 'geo',
        rippleEffect: {
          //涟漪特效
          period: 4, //动画时间，值越小速度越快
          // brushType: 'stroke', //波纹绘制方式 stroke, fill
          scale: 5 //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: 'right', //显示位置
            offset: [5, 0], //偏移设置
            formatter: function (params) {
              //圆环显示文字
              return params.data.name
            },
            fontSize: 13,
            color: 'white'
          },
          emphasis: {
            show: true
          }
        },
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
          normal: {
            show: false,
            borderWidth: 1,
            color: 'rgba(255, 86, 11, 1)'
          }
        },
        data: [
          {
            name: 'A',
            value: [...points[0], 323]
          },
          {
            name: 'B',
            value: [...points[1], 323]
          },

          {
            name: 'C',
            value: [...points[2], 323]
          },
          {
            name: 'C',
            value: [...points[3], 323]
          }
        ]
      }
    ]
  }

  myChart.value.setOption(option)
  myChart.value.on('click', (params) => {
    console.log(params)
    // debugger
  })
}
function getData() {
  let res = gzData
  return res
}

//点击切换
const selectArea = (areaName: any) => {
  // 取消之前选中区域的高亮
  if (selectedArea.value) {
    myChart.value.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      name: selectedArea.value
    })
    // debugger
  }
  // 执行地图高亮操作
  myChart.value.dispatchAction({
    type: 'highlight',
    seriesIndex: 0, // 如果有多个系列，需要指定系列的索引
    name: areaName
  })

  selectedArea.value = areaName
}

onMounted(() => {
  setEcharts()
})
</script>
<style lang="scss" scoped></style>

三、效果