安装echarts
npm install echarts --save
import {useEffect } from "react"import * as echarts from 'echarts'; //全局引入 ，可按需引入import china from "../utils/china.json" import "./map.css";const Map=()=>{var myChart ;useEffect(()=>{loadingChina()},[])const loadingChina = () => {mapOption("china", china) //初始化-创建中国地图}const convertData = () => {let res = [{name: "南海诸岛",value: 0,itemStyle: {normal: {opacity: 0,label: {show: false}}}}]return res}const mapOption=(mapName,data)=>{if (myChart !== null && myChart !== "" && myChart !== undefined) {myChart.dispose();//销毁（如果存在需要销毁，点击时会创建新的图表对象）}myChart = echarts.init(document.querySelector('.map'));//初始化echarts.registerMap(mapName, data)var option = {geo: {map: mapName,geoIndex: 0,label: {emphasis: {show: true,color: '#fff' //地区显示文字样式}},roam: true,zoom: 1.2, //设置地图放大regions: convertData(),//去掉南海诸岛itemStyle: {normal: {areaColor: 'rgb(30,55,106)', //地区填充颜色borderColor: 'rgba(128,208,255,.8)',//边界线颜色shadowColor: 'rgb(20,50,97)',//阴影颜色shadowBlur: 20,//模糊大小borderWidth: 1.8,},emphasis: {//选中样式areaColor: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#0AFBFF'}, {offset: 1, color: '#0157C9'}],global: false},}}}};myChart.setOption(option); //绘图//点击画布内还是画布外myChart.getZr().on('click', params => {if (params.target) {myChart.on('click', echartsMapClick);//增加点击事件} })}const echartsMapClick=()=>{//点击地图模块逻辑事件}return (<div className="map"></div>)}export default Map
//地区json文件下载地址
/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
在此基础上要实现点击地区- 某地区放大单独显示功能
1.引入某地区的json文件
2.在点击事件中，再次绘图 mapOption(“sichuan”, json文件)
PS：一般地图下面都有几段线，在绘制时都要求去掉，引入没有下面几段线的json文件即可
