欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React+echarts?(echarts-for-react)?實(shí)現(xiàn)中國(guó)地圖及省份切換功能

 更新時(shí)間:2022年11月21日 14:42:22   作者:三兩代碼  
這篇文章主要介紹了React+echarts?(echarts-for-react)?畫中國(guó)地圖及省份切換,有足夠的地圖數(shù)據(jù),可以點(diǎn)擊到街道,示例我只出到市級(jí),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)需要的朋友可以參考下

有足夠的地圖數(shù)據(jù),可以點(diǎn)擊到街道,示例我只出到市級(jí)

以u(píng)mi為框架,版本是:

 "react": "^18.2.0",

  "umi": "^4.0.29",

  "echarts": "^5.4.0",

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

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

廢話少說,上代碼:

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

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

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

    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點(diǎn)擊事件
                    if (param.name) {//判斷名稱是否為空
                        const echartInstance = curRef.current.getEchartsInstance();//獲取echarts實(shí)例
                        let options = echartInstance.getOption()//獲取option

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

                            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//修改點(diǎn)擊后地圖中心位置,不用會(huì)存在偏移,我使用下邊null,默認(rèn)全局居中
                            options.series[0].center = null;  //修改點(diǎn)擊后地圖中心位置,null默認(rèn)全局居中
                            echartInstance.setOption(options, true)//修改echarts option
                        } catch (error) {//獲取Geojson地圖異常返回到全國(guó)地圖,我只存在市級(jí)地圖數(shù)據(jù),所以點(diǎn)擊市級(jí)行政區(qū)會(huì)返回到全國(guó)地圖。
                            options.title[0].text = '全國(guó)地圖'
                            echarts.registerMap('map', china);
                            options.series[0].name = '全國(guó)地圖'

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

地圖Geojson數(shù)據(jù)存放路徑:src\assets\MapJson

親測(cè)可用!

到此這篇關(guān)于React+echarts (echarts-for-react) 畫中國(guó)地圖及省份切換的文章就介紹到這了,更多相關(guān)React echarts 中國(guó)地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • React網(wǎng)絡(luò)請(qǐng)求發(fā)起方法詳細(xì)介紹

    React網(wǎng)絡(luò)請(qǐng)求發(fā)起方法詳細(xì)介紹

    在編程開發(fā)中,網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求是必不可少的,這篇文章主要介紹了React網(wǎng)絡(luò)請(qǐng)求發(fā)起方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2022-09-09
  • 解決react-connect中使用forwardRef遇到的問題

    解決react-connect中使用forwardRef遇到的問題

    這篇文章主要介紹了解決react-connect中使用forwardRef遇到的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • React Fragment 和空標(biāo)簽(<></>)用法及區(qū)別詳解

    React Fragment 和空標(biāo)簽(<></>)用法及區(qū)別詳解

    本文詳細(xì)介紹了React中的Fragment和空標(biāo)簽的使用,包括它們的區(qū)別、使用場(chǎng)景、性能考慮以及最佳實(shí)踐,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
    2025-01-01
  • React中使用ResizeObserver來觀察元素size變化的方法

    React中使用ResizeObserver來觀察元素size變化的方法

    在 React 中使用 ResizeObserver 來觀察元素的大小變化,可以通過創(chuàng)建一個(gè)自定義 Hook 來封裝 ResizeObserver 的邏輯,并在組件中使用這個(gè) Hook,以下是一個(gè)完整的示例,展示了如何在 React 中使用 ResizeObserver 來觀察元素的大小變化,需要的朋友可以參考下
    2024-12-12
  • 如何使用 electron-forge 搭建 React + Ts 的項(xiàng)目

    如何使用 electron-forge 搭建 React + Ts&n

    本文介紹了如何使用Electron、electron-forge、webpack、TypeScript、React和SCSS等技術(shù)搭建一個(gè)桌面應(yīng)用程序,通過這篇文章,開發(fā)者可以創(chuàng)建一個(gè)包含React組件、SCSS樣式、靜態(tài)資源和Loading頁面的應(yīng)用,感興趣的朋友一起看看吧
    2025-01-01
  • ReactHook使用useState更新變量后,如何拿到變量更新后的值

    ReactHook使用useState更新變量后,如何拿到變量更新后的值

    這篇文章主要介紹了ReactHook使用useState更新變量后,如何拿到變量更新后的值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • react?事項(xiàng)懶加載的三種方法及使用場(chǎng)景

    react?事項(xiàng)懶加載的三種方法及使用場(chǎng)景

    這篇文章主要介紹了react?事項(xiàng)懶加載的三種方法及使用場(chǎng)景,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-07-07
  • 淺談React和Redux的連接react-redux

    淺談React和Redux的連接react-redux

    本篇文章主要介紹了淺談React和Redux的連接react-redux,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-12-12
  • react入門級(jí)詳細(xì)筆記

    react入門級(jí)詳細(xì)筆記

    這篇文章講述了React的基本介紹,基本使用和React相關(guān)js庫.通過這篇文章可以入門React的使用,可以快速上手使用React進(jìn)行代碼的編寫
    2021-06-06
  • react自動(dòng)化構(gòu)建路由的實(shí)現(xiàn)

    react自動(dòng)化構(gòu)建路由的實(shí)現(xiàn)

    這篇文章主要介紹了react自動(dòng)化構(gòu)建路由的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04

最新評(píng)論