React+echarts (echarts-for-react) 實現中國地圖及省份切換功能

import EChartsReact from 'echarts-for-react';
import * as echarts from 'echarts';
import china from "@/assets/MapJson/全國.json"; //默認引入全國地圖
import { useRef, } from 'react';
echarts.registerMap('map', china);//默認註冊全國地圖
export default () => {
    let curRef = useRef(null);
    let height = window.screen.availHeight

    let option = {
        title: {
            text: '全國地圖',
            textStyle: {
                color: "#000",
            },
            left: 'center',
        },
        series: [
            {
                name: '全國地圖',
                type: 'map',
                mapType: 'map',
                scaleLimit: {
                    //滾輪縮放的極限控制
                    min: 0.5, //縮放最小大小
                    max: 10, //縮放最大大小
                },

                label: { // 圖形上的文本標簽，可用於說明圖形的一些數據信息，比如值，名稱等。
                    show: true, //顯示省市名稱
                    position: [1, 100], // 相對的百分比
                    fontSize: 12,
                    offset: [2, 0], // 是否對文字進行偏移。默認不偏移。例如：`[30, 40]` 表示文字在橫向上偏移 `30`，縱向上偏移 `40`。
                    align: "left" // 文字水平對齊方式，默認自動。
                },
                itemStyle: { // 地圖區域的多邊形 圖形樣式
                    areaColor: "#fff" // 地圖圖形顏色
                },
                roam: true, // 是否開啟鼠標縮放和平移漫遊。默認不開啟。如果隻想要開啟縮放或者平移，可以設置成 `'scale'` 或者 `'move'`。設置成 `true` 為都開啟
                zoom: 1.25, // 當前視角的縮放比例
            }
        ]
    }

    return <div className='bazaarMap'>
        <EChartsReact option={option} ref={curRef} style={{ width: '100%', height: height, zIndex: 222 }}
            lazyUpdate={true} notMerge={true} onEvents={{
                'click': (param: any) => {//echarts點擊事件
                    if (param.name) {//判斷名稱是否為空
                        const echartInstance = curRef.current.getEchartsInstance();//獲取echarts實例
                        let options = echartInstance.getOption()//獲取option

                        let provinceJSON = null
                        try {
                            provinceJSON = require(`@/assets/MapJson/${param.name}.json`);//根據點擊的省名稱查詢Geojson地圖數據（我是將地圖數據全部保存在本地，可根據API獲取地圖json）
                            echarts.registerMap('map', provinceJSON);//註冊點擊的省份地圖

                            options.title[0].text = param.name + '地圖'
                            options.series[0].name = param.name + '地圖'

                            // options.series[0].center = china.features.find(item => item.properties.name === param.name)?.properties?.center//修改點擊後地圖中心位置，不用會存在偏移，我使用下邊null,默認全局居中
                            options.series[0].center = null;　　//修改點擊後地圖中心位置，null默認全局居中
                            echartInstance.setOption(options, true)//修改echarts option
                        } catch (error) {//獲取Geojson地圖異常返回到全國地圖，我隻存在市級地圖數據，所以點擊市級行政區會返回到全國地圖。
                            options.title[0].text = '全國地圖'
                            echarts.registerMap('map', china);
                            options.series[0].name = '全國地圖'

                            options.series[0].center = null
                            echartInstance.setOption(options, true)
                        }
                    }
                },
            }} />
    </div>
}