antd react echarts地图组件点击地市传参给父组件，点击同一个地市取消选中并传参给父组件触发查询，qiankun嵌入后切换子应用时地图渲染跑偏

已于 2024-10-30 16:26:11 修改
阅读量636 收藏
点赞数 7
CC 4.0 BY-SA版权
分类专栏： ant design - react 文章标签： react.js echarts javascript
于 2024-08-12 16:05:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010234868/article/details/141133981

antd react echarts地图组件点击地市传参给父组件，点击同一个地市取消选中并传参给父组件触发查询地图组件：

import { useEffect, useState } from "react";
import * as echarts from "echarts";
import chinaJson from './chinaJson';

const MapIndex = ({
  option,
  onCityClick,
  width = "100%",
  height = "100%",
}) => {
  const [selectedCity, setSelectedCity] = useState('');
  let mapInstance;

  const renderMap = () => {
    // 销毁实例，销毁后实例无法再被使用
    if (mapInstance) {
      mapInstance.dispose();
    }
    let chartDom = document.getElementById("map");
    mapInstance = echarts.init(chartDom);
    // 注册地图到echarts中,这里的'china'要与地图数据的option中的series、geo中的map属性值对应
    echarts.registerMap('china', chinaJson);
    mapInstance.setOption(option);
    document.getElementById("map").removeEventListener;
    window.addEventListener("resize", () => {
      mapInstance.resize();
    });
    // 在渲染点击事件之前先清除点击事件
    mapInstance.off('click');
    mapInstance.on("click", (params) => {
      // params中包含了点击的地市信息
      const { name } = params;
      console.log(name, selectedCity);
      if (name === selectedCity) {
        // 点击的同一个城市
        setSelectedCity('');
        onCityClick(''); // 传参给父组件
      } else {
        setSelectedCity(name); // 点击其他地市则传递地市名称
        onCityClick(name); // 传参给父组件
      }
    });
  };

  useEffect(() => {
    renderMap();
  }, [option, selectedCity]);

  return <div id="map" style={{ width, height }} />;
};

export default MapIndex;

chinaJson文件从 DataV.GeoAtlas地理小工具系列获取：

组件使用：

import { useRef, useEffect } from "react";
import MapIndex from './MapIndex';

const Index = () => {
  let option = {
    tooltip: {},
    visualMap: {
      show: false, // 是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
      type: "continuous", // 类型为连续型视觉映射
      calculable: false, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
      inRange: {
        color: ["#ffd258", "#ff9e45"],
      },
    },
    // 地理坐标系组件
    geo: {
      map: 'china',
      aspectScale: 0.75, //长宽比
      zoom: 1.2,
      roam: false, // 滚轮 放大缩小
      emphasis: {
        label: {
          show: false,
        },
      },
      itemStyle: {
        areaColor: {
          // 默认区块颜色
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#BFFFDD", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#FFFFFF", // 100% 处的颜色
            },
          ],
        },
        shadowColor: "#FFFFFF", // 青色
        shadowBlur: 0,
        shadowOffsetX: 10,
        shadowOffsetY: 10,
        borderWidth: 0,
      },
    },
    series: [
      {
        id: "map",
        type: "map", // 图表类型
        map: 'china', // 已注册的地图
        aspectScale: 0.75, //长宽比
        showLegendSymbol: false, // 存在legend时显示
        roam: false,
        label: {
          show: true,
          color: "#333",
          fontWeight: 700,
          textShadowBlur: 5,
          textShadowOffsetX: 0,
          textShadowOffsetY: 4,
        },
        emphasis: {
          label: {
            color: "#e8eefc",
          }
        },
        select: {
          // 选中状态下的多边形和标签样式
          itemStyle: {
            borderColor: "#67E51F",
            borderWidth: 1,
            areaColor: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#A3DF7F", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#017E0F", // 100% 处的颜色
                },
              ],
            },
          },
          label: {
            color: "#e8efce",
          },
        },
        itemStyle: {
          // 地图区域的多边形 图形样式
          borderColor: "#017E0F",
          borderWidth: 0.4,
          areaColor: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#BFDFDF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#FFFFFF", // 100% 处的颜色
              },
            ],
          },
        },
        emphasis: {
          itemStyle: {
            areaColor: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#A3DF7F", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#017E0F", // 100% 处的颜色
                },
              ],
            },
            borderColor: "#67E51F",
            borderWidth: 1,
            shadowColor: "rgba(103, 225, 245, 0.7)",
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
          }
        },
        zoom: 1.2,
        animation: false,
        data: [
          {
            value: 218,
            name: "北京",
          },
          {
            value: 122,
            name: "广东",
          },
        ],
      },
    ], // 图表数据
  };

  // 点击地图获取地市名称
  const handleCityClick = (cityName) => {
    console.log(cityName);
  };

  <MapIndex option={option} onCityClick={handleCityClick} height="100%" width="100%" />;
}

export default Index;

使用上面的代码，遇到qiankun微应用挂载不同的子应用时，由于地图的width、height以及其父元素的宽高都是百分比，地图渲染会偏向一边，canvas的width会很大，解决该问题可以通过ResizeObserver监听父容器尺寸的变化，并在尺寸变化时调用ECharts的resize方法来重新计算图表的尺寸，地图组件代码如下：

import { useRef, useEffect, useState } from "react";
import * as echarts from "echarts";
import chinaJson from './chinaJson';

const MapIndex = ({
  option,
  onCityClick,
  width = "100%",
  height = "100%",
}) => {
  const [selectedCity, setSelectedCity] = useState('');
  const chartRef = useRef(null);
  let myChart = null;

  const renderMap = () => {
    if (chartRef.current) {
      // 初始化ECharts实例  
      myChart = echarts.init(chartRef.current);
      // 注册地图到echarts中,这里的'china'要与地图数据的option中的series、geo中的map属性值对应
      echarts.registerMap('china', chinaJson);
      // 设置图表选项  
      myChart.setOption(option);

      // 监听窗口大小变化  
      const resizeObserver = new ResizeObserver(() => {
        if (myChart) {
          myChart.resize();
        }
      });
      resizeObserver.observe(chartRef.current.parentElement);

      // 在渲染点击事件之前先清除点击事件
      myChart.off('click');
      myChart.on("click", (params) => {
        // params中包含了点击的地市信息
        const { name } = params;
        if (name === selectedCity) {
          // 点击的同一个城市 设置指定值
          setSelectedCity('xxx');
          onCityClick('xxx');
        } else {
          setSelectedCity(name); // 点击其他地市则传递地市名称
          onCityClick(name);
        }
      });

      // 清理函数  
      return () => {
        if (myChart) {
          myChart.dispose();
        }
        resizeObserver.disconnect();
      };
    }
  };

  useEffect(() => {
    renderMap();
  }, [option, selectedCity]);

  return <div ref={chartRef} style={{ width, height }} />;
};

export default MapIndex;

组件的使用：

import MapIndex from './MapIndex';

const Index = () => {
  let option = {
    tooltip: {},
    visualMap: {
      show: false, // 是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
      type: "continuous", // 类型为连续型视觉映射
      calculable: false, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
      inRange: {
        color: ["#ffd258", "#ff9e45"],
      },
    },
    // 地理坐标系组件
    geo: {
      map: 'china',
      aspectScale: 0.75, //长宽比
      zoom: 1.2,
      roam: false, // 滚轮 放大缩小
      emphasis: {
        label: {
          show: false,
        },
      },
      itemStyle: {
        areaColor: {
          // 默认区块颜色
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#BFFFDD", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#FFFFFF", // 100% 处的颜色
            },
          ],
        },
        shadowColor: "#FFFFFF", // 青色
        shadowBlur: 0,
        shadowOffsetX: 10,
        shadowOffsetY: 10,
        borderWidth: 0,
      },
    },
    series: [
      {
        id: "map",
        type: "map", // 图表类型
        map: 'china', // 已注册的地图
        aspectScale: 0.75, //长宽比
        showLegendSymbol: false, // 存在legend时显示
        roam: false,
        label: {
          show: true,
          color: "#333",
          fontWeight: 700,
          textShadowBlur: 5,
          textShadowOffsetX: 0,
          textShadowOffsetY: 4,
        },
        emphasis: {
          label: {
            color: "#e8eefc",
          }
        },
        select: {
          // 选中状态下的多边形和标签样式
          itemStyle: {
            borderColor: "#67E51F",
            borderWidth: 1,
            areaColor: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#A3DF7F", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#017E0F", // 100% 处的颜色
                },
              ],
            },
          },
          label: {
            color: "#e8efce",
          },
        },
        itemStyle: {
          // 地图区域的多边形 图形样式
          borderColor: "#017E0F",
          borderWidth: 0.4,
          areaColor: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#BFDFDF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#FFFFFF", // 100% 处的颜色
              },
            ],
          },
        },
        emphasis: {
          itemStyle: {
            areaColor: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#A3DF7F", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#017E0F", // 100% 处的颜色
                },
              ],
            },
            borderColor: "#67E51F",
            borderWidth: 1,
            shadowColor: "rgba(103, 225, 245, 0.7)",
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
          }
        },
        zoom: 1.2,
        animation: false,
        data: [
          {
            value: 218,
            name: "北京",
          },
          {
            value: 122,
            name: "广东",
          },
        ],
      },
    ], // 图表数据
  };

  // 点击地图获取地市名称
  const handleCityClick = (cityName) => {
    console.log(cityName);
  };

  <MapIndex option={option} onCityClick={handleCityClick} />;
}

export default Index;

React子组件给父组件传值， 父组件引用子组件并给子组件传值
a_靖的博客
11-27 3642
本博客代码是 React 父组件和子组件相互传值的 demo；实现封装一个折线图，折线图选择下拉框，获取下拉框点击的值并且传给父组件根据下拉框筛选的条件更新视图；效果图如下： 父组件代码： 代码解析：父组件 Parent 引用子组件 Sub ,传递了 list 组件给子组件，并且接收子组件传递给父组件的 storeId ; import React, { Component } fro...
Ant Design Charts绘制中国地图并动态添加标记点
weixin_55652851的博客
11-17 3697
Ant Design Charts绘制中国地图并动态添加标记点
react+antd系列之引入echart图表
热门推荐
菜鸟搬砖记
11-12 2万+
要在antd中引入echart图表，首先得安装echart包，命令如下： cnpm install echarts --save echart安装完毕，要如何使用呢，在react中我们要引入我们刚刚安装的echart，如下： import echarts from 'echarts/lib/echarts'; 但是这里引入这个还不止，假设你要画柱状图，则你得引入： import 'echart...
Ant Design Charts 图表库入门指南：React 数据可视化的利器
最新发布
gitblog_00096的博客
06-28 326
Ant Design Charts 图表库入门指南：React 数据可视化的利器 什么是 Ant Design Charts？ Ant Design Charts 是一个基于 React 的图表组件库，它让数据可视化变得简单高效。作为 Ant Design 生态系统的一部分，它继承了 Ant Design 的优秀设计理念，同时结合了 AntV 团队强大的可视化能力。 核心优势 1. 开箱即用的图表...
react项目中，使用antd封装echarts公共组件
七侠剑客的博客
10-23 1937
      使用react开发项目，由于业务需求，发现很多数据展示需要使用echarts进行绘制，如果每次都在页面中实例、加载以及同步更新数据，会发现代码比较冗余，每次代码的工作量都比较大，那么是否能使用更简单的方式去实现绘制echarts图标呢？       那么这里我们就可以使用react组件化的思想，封装echarts公共组件，使组件能够复用。什么是组件化？组件化并不是前端所特有的，
antd使用g2plot统计图表(7)
qq_41969287的博客
04-29 3173
统计图表一、基本步骤二、使用三、完整代码三、效果演示 G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成。 特性 📦 开箱即用、默认好用的高质量统计图表 🎨 提炼自企业级产品的视觉语言和设计规范 📊 响应式图表：致力于解决图表在任何数据和显示尺寸下的基本可读性问题 🔳 图层化设计方法：在 G2Plot 体系下，图表不仅仅只是各不相关的实例，图层概念的引入提供了多图表组合叠联动，共同讲述一个数据故事的可能性 https://antv.vision/zh htt
react+antd：使用echarts开发图表
羽墨灵丘的博客
12-08 429
react项目中使用echarts
在react-antd中弹出层form内容传递给父组件的操作
01-21
我就废话不多说了，大家还是直接看代码吧~ ... getItemsValue = ()=>{ //3、自定义方法，用来传递数据（需要在父组件中调用获取数据） const values= this.props.form.getFieldsValue(); //4、getFi
react+ts+antd cron表达式组件
11-16
在这个"react+ts+antd cron表达式组件"项目中，开发者整合了这些技术来实现一个特定功能——Cron表达式编辑器。 Cron表达式是一种用于配置定时任务的格式，常见于Unix和Linux系统。它由七个字段组成，从左到右分别...
2022升级 React18+TS高仿AntD从零到一打造组件库
09-02
在本课程"2022升级 React18+TS高仿AntD从零到一打造组件库"中，我们将深入探讨React最新版本18的特性，结合TypeScript（TS）的强大类型系统，以及如何模仿流行的Ant Design（AntD）框架，来创建一个自定义的组件库。...
ECharts在React+Antd用法及常见错误
01-08
最近项目中开始使用ECharts做图表，在React+Antd中使用Echart还是遇到了很多坑，希望记录下解决办法可以帮助到大家。由于初次使用，很多代码优化空间很大，希望大家能帮我提出，感恩～ 最终效果 1、实现点击折线图上的点联动两个饼图数据 2、处理ECharts饼图数据为0或者是空时饼图消失问题 2、 在对ECharts图表进行init // 饼图初始option const initPieOption = { // tooltip: { // show: false, // }, dataset: { dimensions: ['de
React地图组件ReactiveMaps.zip
07-17
Reactive Maps 是一个 React 组件库用来构建可以实时更新的地图。 标签：Reactive
React + Ant Design + ECharts 实战：复杂智慧大屏开发，动态数据 + 3D 图表 + 数据列表！」 「从零开始：用 React 和 Ant Design 打造高级智慧大屏，
sky10100100的博客
01-26 692
React + Ant Design + ECharts 实战：复杂智慧大屏开发，动态数据 + 3D 图表 + 数据列表！」 「从零开始：用 React 和 Ant Design 打造高级智慧大屏，ECharts 图表全覆盖！」 「前端进阶：React + Ant Design + ECharts 复杂智慧大屏开发全攻略！」 「React + Ant Design + ECharts 高级可视化大屏开发指南：动态数据 + 3D 图表 + 数据列表！」 「前端开发高手必备：React + Ant De
Antd Pro + BizCharts图标、地图详解（ps:又是一篇踩坑日记）
qq_44752117的博客
02-16 3800
BizCharts图标地图（ps:又是一篇踩坑日记） 写在前面： 在这篇文章中你能看到： BizChart，堆叠图、柱状图、饼图、中国地图在Pro中是如何使用的 笔者踩过的一些小坑 笔者最近的一个业务是在Pro中做一个DashBord，选什么UI自定义，因为我是从来没有研究过前端可视化的，当时我就懵逼了。。。 But，领导一副我看好你小伙子的表情，即使再慌我表面也依旧稳如老狗，好了，废话不多说，笔者研究了一下complete版本的Pro，发现Pro已经集成了BizCharts，于是就开始了这两天的踩坑
React使用echarts显示中国地图
weixin_55652851的博客
07-03 1378
return value.data.name + "" + "数量：" + value.data.num;'#BBF6A4' : "#0efacc",//圆点边框颜色。'#BBF6A4' : "#0efacc",//圆点背景颜色。regions: [//此方法是把显示南海诸岛的框给去掉，如果要显示，删除即可。borderColor: "#a0d4e7", // 地图边框线色。areaColor: "#e5f7ff", // 地图图形颜色。borderWidth: 1, // 地图边框线宽。
使用 Ant Design Pro 的图表（展示cpu、内存、硬盘）
西京刀客
01-11 2859
很多时候我们都需要一个美观大方的图表页来充当首页，在快速展示大盘信息的同时还能吸引眼球，提升系统的质感。所以我们也做了一个图表库 Ant Design Charts。
Antd Charts 折线图（面积图）踩的坑
qq_32002789的博客
12-08 1446
React+Antd Charts 折线图（面积图）高度缩小以及多次渲染问题解决
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值