一个简单的地图展示echarts

当前需求：

1、地区存在分会，高亮显示；

2、鼠标移入存在分会的板块，该板块高亮，并出现提示信息；

3、鼠标移入不存在分会的板块，该板块高亮，但不出现提示信息；

注：该分会点是涟漪状的，截图时正在动态展示，没有上图那么丑，当然可以在rippleEffect属性里自己配置

 一、下载地图信息

https://datav.aliyun.com/portal/school/atlas/area_selector

二、 完整代码

以组件为例子：

<template>
  <div ref="chinaMap" style="height: 100%;width: 100%; min-height:600px; "></div>
</template>

<script setup>
import * as echarts from 'echarts'
import chinaJSON from '../../assets/json/China.json'
import { onMounted, ref } from 'vue'
const chinaMap = ref()
const selectedOrg = ref([])
onMounted(() => {
  drawChina()
})

let seriesData = [
  { name: '北京', value: [116.41995,40.18994], orgName: '北京区域学会' , contacts: "张老师" , tel:"12345678906"},
  { name: '甘肃', value: [103.823557,36.058039], orgName: '甘肃区域学会' , contacts: "张老师" , tel:"12345678906" },
  { name: '新疆', value: [87.613228, 43.810394,9], orgName: '新疆区域学会' , contacts: "张老师" , tel:"12345678906" },
  { name: '湖南', value: [112.982279,28.19409], orgName: '湖南区域学会' , contacts: "张老师" , tel:"12345678906" },
  { name: '西安', value: [108.953445, 34.288842], orgName: '西安区域学会' , contacts: "张老师" , tel:"12345678906" },
  { name: '云南', value: [102.710002, 25.045806], orgName: '云南区域学会' , contacts: "张老师" , tel:"12345678906" },
]

function drawChina() {
  let myChart = echarts.init(chinaMap.value)
  echarts.registerMap('china', chinaJSON) //注册可用的地图
  let option = {
    // 地图
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        show: false,
      },
    },
    // 提示框
    tooltip: {
      trigger: 'item',
      enterable: true,
      confine: true,
      backgroundColor: "rgba(0, 0, 0, 0.9)",
      borderWidth: 0,
      textStyle:{
        color: "#fff",
        fontSize: 12,
      },
      formatter:()=>{
        if(selectedOrg.value.length > 0){
          return `<div style="border-radius:10px">
            <p style="font-size: 14px; margin-bottom: 6px; font-weight: bold">${selectedOrg.value[0].orgName}</p>
            <p>联系人：${selectedOrg.value[0].contacts}</p>
            <p>联系电话：${selectedOrg.value[0].tel}</p>
          </div>`
        }
      }
    },
    // 基础配置
    series: [
      {
        name: '赛区信息',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: seriesData, 
        showEffectOn: 'render',
        symbolSize: 6,
        //涟漪特效相关配置
        rippleEffect: {
          brushType: 'fill',
          number: 2,
          scale: 5,
        },
        cursor: 'pointer',
        hoverAnimation: true,
        itemStyle: {
          //图形在默认状态下的样式
          normal: {
            color: '#13DFEA', //散点的颜色
          },
        },
        zlevel: 1,
      },
      {
        type: "map",
        map: "china",
        zoom: 1.2,
        label: {
          normal: {
            show: true,
            color: '#000000',
          },
          emphasis: {
            show: true,
            color: '#ffffff',
          }
        },
        itemStyle: {
          normal: {
            areaColor: '#E6EFFF',
            color: '#000000',
            borderColor: '#ffffff',
            borderWidth: 2,
          },
          emphasis: {
            color: '#ffffff',
            areaColor: '#006AFE',
          },
        },
        select: {
          disabled: true,
        }
      },
    ]
  }

  myChart.on("mouseover", (params) => {
    selectedOrg.value = []
    seriesData.forEach(ele=>{
      if(ele.name === params.name){
        selectedOrg.value.push(ele)
      }
    })
  });

  myChart.on("mouseout", (params) => {
    selectedOrg.value = []
  });
  myChart.setOption(option)
}
</script>

 三、详解

1、chinaJSON是啥？

第一步引入的地图下载内容，也就是地图的信息。

2、seriesData

需要后端返回的数据，可自定义。

3、为什么geo信息这么少？

因为目前要求为：鼠标移入地图板块，只要该地区有关键点，就出现tooltip，没有则不显示，所以加了一层 map ，把鼠标移入的高亮效果直接写到这个里面了。

4、为什么使用鼠标移入移出事件？

为什么不在tooltip里面直接通过formatter的value判別，而选择了鼠标移入移出事件？

主要原因是再通过循环确认展示信息，消耗时间，如果数据量过大，显然不适合，而且formatter函数会不断地被触发，影响性能。

5、如果要改为鼠标移入关键点才显示tooltip效果，是不是就不需要map这一层了？

是的，完全可以去掉。步骤如下：

1、将map里面的高亮效果之类的移到geo里面，删除map；

2、tooltip放effectScatter里面，或者不移动tooltip，给geo的属性tooltip添加 show: false,给effectScatter的属性tooltip添加 show: true,

6、如何改变tooltip的样式？

建议看官网，或者和上面代码一样直接在formatter里面返回代码段，自己写样式拼接。

7、如何改变点的样式与字体等效果？

https://echarts.apache.org/zh/option.html