[JavaScript知识库]react echarts中国地图的实现

安装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文件下载地址

http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4

http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

在此基础上要实现点击地区- 某地区放大单独显示功能

1.引入某地区的json文件
2.在点击事件中，再次绘图 mapOption(“sichuan”, json文件)
PS：一般地图下面都有几段线，在绘制时都要求去掉，引入没有下面几段线的json文件即可