使用echarts 制作中国地图的显示（基础的配置 + 省份高亮显示 + 鼠标滑动高亮）

经常在制作数据大屏展示的时候，会需要显示中国地图，并且要在地图上做一些 省份高亮显示 +  鼠标滑动高亮

echarts官网：Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

1.安装echarts依赖
npm install echarts

yarn add echarts

2.写一个标签让地图显示(style中的height，width高宽，自己设置即可)  

<1>正常的dom获取

<div id="centerMap" style=" height:535px; width:750px;"></div>

<2>ref获取

<div  ref="centerMap" style=" height:535px; width:750px;"></div>

3.script代码  

 echarts地图配置API地址：  地图基本配置

<script setup lang="ts">
import * as echarts from 'echarts';
//并且引入china.json文件
import china from '.china.json';

//创建地图容器
//原生获取dom元素（获取操作dom方式，二选一即可）
const myChart = echarts.init(document.getElementById('centerMap'));

//使用$ref 获取dom元素（获取操作dom方式，二选一即可）
const centerMap = ref('');
const myChart = echarts.init(centerMap.value);

//注册地图           地图名称  地图数据
echarts.registerMap("china", china);

myChart.setOption({
geo: {
  map: "china",
  zoom:1.7,
  //滚轮缩放的极限控制
  scaleLimit: {
        min: 1, //最小1倍
        max: 3 //最大3倍
  },
  top:'30%',//位置 
  left:'22%',
  label: {
        show: true,//是否显示省份名称标签。
        fontSize: "10",
        color:'#FFF',
        offset: [12, 8],   
      },
  itemStyle: {
    areaColor:'#4c3cc2',
    borderColor: 'rgba(255,255,255,1)', //省市边界线00fcff 516a89
    shadowColor: "rgba(255,255,255,0.6)",// rgba(128,128,128,1)
    shadowBlur: 2,//阴影的模糊大小  该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
    shadowOffsetX:2,//阴影水平方向上的偏移距离
    shadowOffsetY:2,//阴影垂直方向上的偏移距离。
//鼠标划入省份显示高亮
    emphasis: {//鼠标划入高亮状态下的多边形和标签样式。
      show:true,
      areaColor: "#f98333",
      shadowOffsetX: 4,
      shadowOffsetY: 4,
      focus: 'self',//淡出所有其它的图形
    },
  },
//默认高亮的省份
  regions: [ //这个地方是关键,通过设置regions,可以实现不同的省份边界线配置不同的颜色,
           {
           name:'甘肃省', //这个名字要和china.json保持一致
           itemStyle: {
               areaColor:'#ff0000',
          	},
          },
 					{
           name:'江苏省', 
           itemStyle: {
               areaColor:'#ff0000',
          	},
          },
      ],
},
roam: true,//是否开启鼠标缩放和平移漫游
tooltip: {//是否显示提示框组件。
  show:true,
  tirgger: "item",
},
});

4.实现的效果

正常显示

鼠标滑动

注：需要chain.json文件的私聊我，我发给你