echarts中实现地图下钻

获取地图数据的网址：http://datav.aliyun.com/portal/school/atlas/area_selector
可以在网页上很好的展示JSON数据的google插件：JSON viewer Pro

一些要使用到的地图数据：

const MapData = {
    "china": require('./echarts-option/json/china.json'),
    "北京市": require('./echarts-option/json/beijin.json'),
    "四川省": require('./echarts-option/json/sichuan.json'),
    "河北省": require('./echarts-option/json/hebei.json'),
    "山西省": require('./echarts-option/json/shanxi.json'),
    "辽宁省": require('./echarts-option/json/liaoning.json'),
    "吉林省": require('./echarts-option/json/jilin.json'),
    "黑龙江省": require('./echarts-option/json/heilongjiang.json'),
    "江苏省": require('./echarts-option/json/jiangsu.json'),
    "浙江省": require('./echarts-option/json/zhejiang.json'),
    "安徽省": require('./echarts-option/json/anhui.json'),
    "福建省": require('./echarts-option/json/fujian.json'),
    "江西省": require('./echarts-option/json/jiangxi.json'),
    "山东省": require('./echarts-option/json/shandong.json'),
    "河南省": require('./echarts-option/json/henan.json'),
    "湖北省": require('./echarts-option/json/hubei.json'),
    "湖南省": require('./echarts-option/json/hunan.json'),
    "广东省": require('./echarts-option/json/guangdong.json'),
    "海南省": require('./echarts-option/json/hainan.json'),
    "贵州省": require('./echarts-option/json/guizhou.json'),
    "云南省": require('./echarts-option/json/yunnan.json'),
    "陕西省": require('./echarts-option/json/shanxi1.json'),
    "甘肃省": require('./echarts-option/json/gansu.json'),
    "青海省": require('./echarts-option/json/qinghai.json'),
    "台湾省": require('./echarts-option/json/taiwan.json'),
    "天津市": require('./echarts-option/json/tianjin.json'),
    "上海市": require('./echarts-option/json/shanghai.json'),
    "重庆市": require('./echarts-option/json/chongqing.json'),
    "香港特别行政区": require('./echarts-option/json/xianggang.json'),
    "澳门特别行政区": require('./echarts-option/json/aomen.json'),
    "内蒙古自治区": require('./echarts-option/json/neimenggu.json'),
    "广西壮族自治区": require('./echarts-option/json/guangxi.json'),
    "西藏自治区": require('./echarts-option/json/xizang.json'),
    "新疆维吾尔自治区": require('./echarts-option/json/xinjiang.json'),
    "宁夏回族自治区": require('./echarts-option/json/ningxia.json'),
}

实现步骤

首先，echarts实现地图下钻的功能，基本原理就是重新注册一份新的地图数据，然后将option配置更改。

注册初步渲染的中国地图

import * as echarts from 'echarts';

export default function BigScreen() {
    const mapRef = useRef();
    let mapInstance;

    const renderMap = useMemoizedFn((mapData = CityData['china'], city = 'china') => {
        const renderedMapInstance = echarts.getInstanceByDom(mapRef.current); // 获取dom容器上的实例
        if (renderedMapInstance) {
            mapInstance = renderedMapInstance;
        } else {
            mapInstance = echarts.init(mapRef.current); // 初始化实例
        }
        echarts.registerMap(city, {geoJSON: MapData[city]}); // 注册地图
        mapInstance?.setOption(
            chinaMapConfig({ data: mapData || [], city: city }) // 获取配置信息
        );
        mapInstance.off('click') // 移除原来的click事件
        mapInstance.on('click', (param) => { // 添加新的click事件
            const cityName = param?.name // 获取名字
            MapData[cityName] && mapInstance.clear(); // 清空当前实例，会移除实例中所以的组件和图表
            MapData[cityName] && renderMap(CityData[cityName], cityName) // 重新渲染
        })
    })

    const init = useMemoizedFn(() => {
        //中国地图
        renderMap()

        window.addEventListener("resize", resize)
    })
  
    const resize = useMemoizedFn(() => {
        mapInstance?.resize();
    })
  
  useEffect(() => {
    init()
    return () => window.removeEventListener('resize', resize)
  }, [init])
  
  return (
    <div ref={mapRef}></div>
  )
}

上面的就是主要的逻辑，思路大概是：首先渲染一个中国地图，然后在中国地图上面设置点击事件，点击事件触发的时候，会清除原来的echarts实例，然后重新创建新的实例和新的option绑定到div上面。这是从省级下钻到市级，如果要从市级下钻到区县级同理。如果要从市级返回省级，此时需要添加一个button按钮。

    const backChina = useMemoizedFn(() => {
        mapInstance.clear();
        renderMap()
    })

下面的是chinaMapConfig方法：

export const chinaMapConfig = (configData) => {
  const { data, city } = configData;
  const result = {
    tooltip: {
      // 提示框
      trigger: "item",
      showDelay: 0,
      transitionDuration: 0.2,
      formatter: function (params) {
        let { data = {} } = params;
        let { value = 0 } = data;
        return `${params.name}<br/>
                    个数: ${value}`;
      }
    },
    dataset: {
      source: data
    },
    series: {
      // 地图,可以是数组，多个
      label: {
        show: true, //显示省市名称
        position: [1, 100], // 相对的百分比
        fontSize: 12,
        offset: [2, 0],
        align: "left",
        color: '#fff',
      },
      itemStyle: {
        areaColor: "#5470c6" // 地图图形颜色
      },
      type: "map",
      roam: false, // 整个地图能否缩放，拖拽
      map: city,
      zoom: 1.1, // 当前视角的缩放比例
      top: "15%" // 距离顶部距离
    },
  };
  return result
};