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

名字还没想好☜

已于 2022-10-16 15:30:21 修改

阅读量2.7k

点赞数 1

文章标签： react.js javascript echarts 前端 react

于 2022-05-17 20:30:00 首次发布

本文链接：https://blog.csdn.net/weixin_42662753/article/details/124823762

版权

实现效果如下：

在这里插入图片描述

一、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 } = props

    const 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])

    // 初始化echarts
    const 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)) return
          return `<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')?.key
    setType(res)
  }

  return <div className="map">
    <Echarts option={mapOption1} className='china-chart' click={click} />
    <Echarts option={mapOption2} className='province-chart' />
  </div>

}

export default Map