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

有足夠的地圖數據,可以點擊到街道,示例我隻出到市級

以umi為框架,版本是:

 "react": "^18.2.0",

  "umi": "^4.0.29",

  "echarts": "^5.4.0",

  "echarts-for-react": "^3.0.2",

示例中需要地圖的Geojson數據,中國地圖和省份的geoJson可以在echarts-map或者阿裡的數據可視化中心進行下載。(我這邊示例用的是阿裡的數據)

廢話少說,上代碼:

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

地圖Geojson數據存放路徑:src\assets\MapJson

親測可用!

到此這篇關於React+echarts (echarts-for-react) 畫中國地圖及省份切換的文章就介紹到這瞭,更多相關React echarts 中國地圖內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: