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
};