echart+react实现中国地图点击切换省份（使用react hooks封装echart）

实现效果如下：

一、echart封装（react hooks）

实现容器大小发生改变,重新绘制
在页面卸载时清理监听以及清除图例
实现代码如下

//index.js
import React, { useEffect, useCallback, useRef, useImperativeHandle, useState } from "react";
import './index.less'
import * as echarts from 'echarts';
import * as Map from './map'    //中国地图数据// let chartDom;
// let echartIns;//echarts实例
const Echarts = React.forwardRef((props, ref) => {const { extra, extraClassName, extraStyle, click } = propsconst chartRef = useRef({ chartDom: null, echartIns: null })const id = `echart-wrap-${+new Date()}-${props.className}`;const [flag, setFlag] = useState(false)useEffect(() => {init();window.addEventListener("resize", resizeChart);if (click) {let myChart = echarts.init(document.getElementById(id))myChart.on('click', (params) => {click(params)});}return () => {window.removeEventListener("resize", resizeChart);chartRef.current.echartIns && chartRef.current.echartIns.dispose();}}, [ref])useEffect(() => {const { option } = props;// console.log(option,echartIns);if (chartRef.current.echartIns && Object.keys(option).length) {chartRef.current.echartIns.clear();chartRef.current.echartIns.setOption(option);chartRef.current.echartIns.resize();}}, [JSON.stringify(props.option)])useImperativeHandle(ref, () => {return {echartIns: chartRef.current.echartIns}})// 器大小发生改变,重新绘制const resizeChart = useCallback(() => {console.log('object', chartRef.current.echartIns)if (chartRef.current.echartIns) {chartRef.current.echartIns.resize()};}, [flag])// 初始化echartsconst init = () => {chartRef.current.chartDom = document.getElementById(id);if (!chartRef.current.chartDom) return;const { option } = props;echarts.registerMap('chinaMap', { geoJSON: Map.chinaMap });// echarts.registerMap('guangDongMap', { geoJSON: Map.guangDongMap });Map.mapJson.map(item => {echarts.registerMap(item.key, { geoJSON: Map?.[item.key] });})setTimeout(() => {chartRef.current.echartIns = echarts.init(chartRef.current.chartDom);chartRef.current.echartIns.setOption(option);chartRef.current.echartIns.resize();setFlag(true)}, 350);}const renderEchart = () => {const { className = "" } = props;return <div className={`yss-echart--wrap ${className}`}>{extra && <div className={`extra-echarts ${extraClassName}`} style={extraStyle}>{extra()}</div>}<div id={id} style={{ width: "100%", height: "100%" }} ref={ref} /></div>}return renderEchart()
})export default React.memo(Echarts)

二、引入中国地图数据Json文件，实现统一导出

导入json数据并以变量名导出
定义mapJson数组，记录每个省份的json名称，用户实现点击切换以及注册地图map类型值
实现代码如下：

//map文件
//1.中国地图
import chinaMap from './china.json'
//2.台湾省地图
import taiWanMap from "./台湾省.json";
//3.海南省地图
import haiNanMap from "./海南省.json";
//4.安徽省地图
import anHuiMap from "./安徽省.json";
//5.江西省地图
import jiangXiMap from "./江西省.json";
//6.湖南省地图
import huNanMap from "./湖南省.json";
//7.云南省地图
import yunNanMap from "./云南省.json";
//8.贵州省地图
import guiZhouMap from "./贵州省.json";
//9.广东省地图
import guangDongMap from "./广东省.json";
//10.福建省地图
import fuJianMap from "./福建省.json";//11.浙江省地图
import zheJiangMap from "./浙江省.json";
//12.江苏省地图
import jiangSuMap from "./江苏省.json";
//13.四川省地图
import siChuanMap from "./四川省.json";
//14.重庆市市地图
import chongQingMap from "./重庆市.json";
//15.湖北省地图
import huBeiMap from "./湖北省.json";
//16.河南省地图
import heNanMap from "./河南省.json";
//17.山东省地图import shanDongMap from "./山东省.json";
//18.吉林省地图
import jiLinMap from "./吉林省.json";
//19.辽宁省地图
import liaoNingMap from "./辽宁省.json";
//20.天津市市地图
import tianJinMap from "./天津市.json";
//21.北京市市地图
import beiJingMap from "./北京市.json";
//22.河北省地图
import heBeiMap from "./河北省.json";
//23.山西省地图
import shanXiMap from "./山西省.json";
//24.陕西省地图
import shanXi2Map from "./陕西省.json";
//25.宁夏回族自治区省地图
import ningXiaMap from "./宁夏回族自治区.json";
//26.青海省地图
import qingHaiMap from "./青海省.json";
//27.西藏自治区地图
import xiZangMap from "./西藏自治区.json";
//28.黑龙江省地图
import heiLongJiangMap from "./黑龙江省.json";//29.内蒙古自治区地图
import neiMengGuMap from "./内蒙古自治区.json";
//30.甘肃省地图
import ganSuMap from "./甘肃省.json";
//31.新疆维吾尔自治区省地图
import xinJiangMap from "./新疆维吾尔自治区.json";
//32.广西壮族自治区地图
import guangXiMap from "./广西壮族自治区.json";
//33.香港
import xiangGangMap from "./香港特别行政区.json";
//34.澳门
import aoMenMap from "./澳门特别行政区.json";let mapJson = [{name: "台湾省",json: taiWanMap,key: 'taiWanMap',},{name: "海南省",json: haiNanMap,key: 'haiNanMap'},{name: "安徽省",json: anHuiMap,key: 'anHuiMap'},{name: "江西省",json: jiangXiMap,key: 'jiangXiMap'},{name: "湖南省",json: huNanMap,key: 'huNanMap'},{name: "云南省",json: yunNanMap,key: 'yunNanMap'},{name: "贵州省",json: guiZhouMap,key: 'guiZhouMap'},{name: "广东省",json: guangDongMap,key: 'guangDongMap'},{name: "福建省",json: fuJianMap,key: 'fuJianMap'},{name: "浙江省",json: zheJiangMap,key: 'zheJiangMap'},{name: "江苏省",json: jiangSuMap,key: 'jiangSuMap'},{name: "四川省",json: siChuanMap,key: 'siChuanMap'},{name: "重庆市",json: chongQingMap,key: 'chongQingMap'},{name: "湖北省",json: huBeiMap,key: 'huBeiMap'},{name: "河南省",json: heNanMap,key: 'heNanMap'},{name: "山东省",json: shanDongMap,key: 'shanDongMap'},{name: "吉林省",json: jiLinMap,key: 'jiLinMap'},{name: "辽宁省",json: liaoNingMap,key: 'liaoNingMap'},{name: "天津市",json: tianJinMap,key: 'tianJinMap'},{name: "北京市",json: beiJingMap,key: 'beiJingMap'},{name: "河北省",json: heBeiMap,key: 'heBeiMap'},{name: "山西省",json: shanXiMap,key: 'shanXiMap'},{name: "陕西省",json: shanXi2Map,key: 'shanXi2Map'},{name: "宁夏回族自治区",json: ningXiaMap,key: 'ningXiaMap'},{name: "青海省",json: qingHaiMap,key: 'qingHaiMap'},{name: "西藏自治区",json: xiZangMap,key: 'xiZangMap',},{name: "黑龙江省",json: heiLongJiangMap,key: 'heiLongJiangMap'},{name: "内蒙古自治区",json: neiMengGuMap,key: 'neiMengGuMap'},{name: "甘肃省",json: ganSuMap,key: 'ganSuMap'},{name: "新疆维吾尔自治区",json: xinJiangMap,key: 'xinJiangMap'},{name: "广西壮族自治区",json: guangXiMap, key:'guangXiMap'},{name: "香港特别行政区",json: xiangGangMap,key: 'xiangGangMap'},{name: "澳门特别行政区",json: aoMenMap,key: 'aoMenMap'},
];export {mapJson, chinaMap, taiWanMap, haiNanMap, anHuiMap, jiangXiMap, huNanMap, yunNanMap, guiZhouMap, guangDongMap, fuJianMap, zheJiangMap, jiangSuMap, siChuanMap, chongQingMap, huBeiMap, heNanMap, shanDongMap, jiLinMap, tianJinMap, beiJingMap, heBeiMap, shanXiMap, shanXi2Map, ningXiaMap, qingHaiMap, xiZangMap, heiLongJiangMap, ganSuMap, xinJiangMap, guangXiMap, neiMengGuMap, aoMenMap, xiangGangMap, liaoNingMap
}

三、配置地图的option以及点击切换事件

使用点击事件切换map类型，实现省份切换
实现代码如下：

import React, { useState, useEffect } from "react";
import { Row } from "antd";
import "./index.less";
import { Echarts } from './Echarts/index.js'import { mapJson } from './map'
import { method } from 'method'       //其他方法// import { legend_1, legend_3, legend_4 } from "../img";//legend_2,
const Map = (props) => {const Data = [{name: "广东省",value: 123,},]//设置地图配置const getMapOption = (data = [], type) => {return {title: type == 'chinaMap' ? {text: "产品类型范围",textStyle: {color: "#fff"}} : {text: mapJson.select(type, 'key')?.name,textStyle: {color: "#fff",fontSize: 15,},left: "2%",top: "1%"},legend: {show: false},//点击省份展示的气泡弹窗tooltip: {trigger: 'item',padding: 0,enterable: true,className: 'g2-tooltip',formatter(params) {if (method.IsEmpty(params)) returnreturn `<div class="g2-tooltip-title">${params.name}</div><div class="g2-tooltip-list"><span class='g2-icon'></span>销售量  &nbsp;  &nbsp; ${params?.data?.value ?? 0}</div>`//<span οnclick=window.onClickTooltipMore("${params.name}")>查看更多</span>},},series: [{type: 'map',map: type,// geoIndex: 0,aspectScale: 0.75, //长宽比showLegendSymbol: false, // 存在legend时显示layoutCenter: type == 'chinaMap' ? ["50%", "65%"] : ["52%", "50%"], //地图位置layoutSize: '100%',zoom: type == 'chinaMap' ? 1.3 : 1,label: {normal: {show: true,color: "#00bbff",fontSize: 8,},emphasis: {show: true,color: "#00bbff",fontSize: 8,},},roam: true,itemStyle: {normal: {areaColor: '#0A2D61',borderColor: '#0270BD',borderWidth: 1.5,},emphasis: {areaColor: '#005799',borderColor: '#00BBFF',borderWidth: 2.5,},},select: {itemStyle: {areaColor: '#005799',borderColor: '#00BBFF',borderWidth: 2.5,},label: {show: true,color: "#00bbff",fontSize: 8,},},animation: false,data: Data},]}}const [type, setType] = useState("");const [mapOption1, setMapOption1] = useState(() => getMapOption([], "chinaMap"));//全国地图配置const [mapOption2, setMapOption2] = useState(() => getMapOption([], "guangDongMap"));//省地图配置useEffect(() => {const { mapDataList = [] } = props;if (!mapDataList?.length) return;setMapOption1(() => getMapOption(mapDataList, "chinaMap"));}, [JSON.stringify(props.mapDataList)])useEffect(() => {setMapOption2(() => getMapOption([], type))}, [type])const click = (info) => {let res = mapJson.select(info?.name, 'name')?.keysetType(res)}return <div className="map"><Echarts option={mapOption1} className='china-chart' click={click} /><Echarts option={mapOption2} className='province-chart' /></div>}export default Map

代码仅供参考，如需要地图json数据，可点击小编主页资源下载压缩包

echart+react实现中国地图点击切换省份（使用react hooks封装echart）相关推荐

Vue + echart 实现中国地图和省市地图（可切换省份
vue + echart 实现中国地图和省市地图(可切换省份) - 伏沙金 - 博客园
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
echarts——实现中国地图+世界地图的切换——技能提升
之前写过一篇文章,是关于中国地图的展示. vue+echarts.js 实现中国地图--根据数值表示省份的深浅--技能提升:http://t.csdn.cn/rfQGl 最后实现的效果如下图所示: 今 ...
echart地图加载中国地图，可切换省市地图
前提:vue文件 (代码并不完整,仅参考) echartMapData是个全局对象,在index.html被引入参考代码 <script src="./js/echarts/echa ...
echarts，map中国地图点击各省，跳转展示，从省返回到中国地图【china.js】
效果图: 1.点击省,跳转到河北省 2.返回,从省返回到中国地图话不多说,直接上代码,1.复制粘贴,2.在引入对应js即可注:全部各省地图,下载地址:** <!DOCTYPE html> ...
echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍
今天花了一天的时间,用echart弄了一个效果,是从中国地图点进去身份并把改省份的数据渲染出来的效果,刚开始完全没有头绪,只能硬着头皮去看百度echart的api,和博客,看了半天,好家伙,终于给我找 ...
react echarts中国地图的实现
安装echarts npm install echarts --save import { useEffect } from "react" import * as echarts ...
echarts+vue中国地图,点击进入省级地图
先上效果图再说思路第一步: 生成中国地图第二步: 定义点击事件根据反参生成省级地图所需要的参数第三步: 将省级地图所需要的参数传入渲染方法重新渲染最后说步骤准备 1 npm echarts ...
echarts 中国地图点击进入相应省份海南省里的南海诸岛换成诸岛简图
DataV.GeoAtlas地理小工具系列在这里下载了中国以及各省的json文件,但是下面海南那块国家海岸线里有很多岛我不想要,明明已经有个南海诸岛的框了,在那占位置不好看,这时就要改变下Chin ...

echart+react实现中国地图点击切换省份（使用react hooks封装echart）

一、echart封装（react hooks）

二、引入中国地图数据Json文件，实现统一导出

三、配置地图的option以及点击切换事件

echart+react实现中国地图点击切换省份（使用react hooks封装echart）相关推荐

最新文章

热门文章