antd react echarts地图组件及使用

news2024/11/14 5:57:50

 地图组件:

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

const MapIndex = ({
  option,
  width = "100%",
  height = "100%",
}) => {
  const ref = useRef(null);
  let mapInstance;
  const renderMap = () => {
    if (ref.current) {
      const renderedMapInstance = echarts.getInstanceByDom(ref.current);
      if (renderedMapInstance) {
        mapInstance = renderedMapInstance;
      } else {
        mapInstance = echarts.init(ref.current);
      }
      mapInstance.setOption(option);
      // 点击地图事件
      mapInstance.on("click", (params) => {
        console.log(params);
      });
    }
  };

  useEffect(() => {
    //注册地图到echarts中,这里的'china'要与地图数据的option中的series、geo中的map属性值对应
    echarts.registerMap('china', chinaJson);
    renderMap();
  }, []);

  useEffect(() => {
    window.onresize = function () {
      // 调用echarts实例上resize方法
      mapInstance?.resize();
    };
    return () => {
      // 销毁实例,销毁后实例无法再被使用
      mapInstance && mapInstance.dispose();
    };
  }, []);

  return <div id={styles.map} ref={ref} 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: "广东",
          },
        ],
      },
    ], // 图表数据
  };

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

export default Index;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2033638.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

08:【stm32】中断二:EXTI(外部中断)

EXTI&#xff08;外部中断&#xff09; 1、EXTI简介2、EXTI的内部结构2.1、EXTI通道2.2、内部寄存器 3、EXTI的编写程序3.1、EXTI的编程接口3.1.1、EXTI_Init 4、编写实验 1、EXTI简介 外部中断控制器&#xff0c;能够检测外部输入信号的变化边沿并由此产生中断。通过检测上升沿…

BugKu CTF Misc:密室逃脱 铁子,来一道 想要种子吗 哥哥的秘密

前言 BugKu是一个由乌云知识库&#xff08;wooyun.org&#xff09;推出的在线漏洞靶场。乌云知识库是一个致力于收集、整理和分享互联网安全漏洞信息的社区平台。 BugKu旨在提供一个实践和学习网络安全的平台&#xff0c;供安全爱好者和渗透测试人员进行挑战和练习。它包含了…

Sql语句出现ORA-00933: SQL command not properly ended的解决方法

目录 1. 问题所示2. 原理分析3. 解决方法1. 问题所示 执行sql语句的时候出现如下问题: ORA-00933: SQL command not properly ended截图如下所示: 2. 原理分析 ORA-00933: SQL command not properly ended 是 Oracle 数据库中的错误,指示 SQL 语句存在语法问题 MySQL 和…

聚观早报 | 马斯克xAI新计划;iPhone SE 4将配A18芯片

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 8月13日消息 马斯克xAI新计划 iPhone SE 4将配A18芯片 真我GT7 Pro参数曝光 谷歌Pixel 9 Pro Fold最新配色 苹果…

TikTok达人影响力解析:品牌出海中的信任桥梁与口碑加速器

在全球化背景下&#xff0c;品牌出海已成为企业拓展市场的必然选择。然而&#xff0c;在陌生的国际市场上&#xff0c;如何快速建立品牌信任、提升品牌知名度、并实现有效的口碑传播&#xff0c;成为了企业面临的巨大挑战。在这一过程中&#xff0c;TikTok达人发挥着不可替代的…

systemverilog绿皮书随记(八)-- 功能覆盖率

代码覆盖率&#xff1a; 路径覆盖率&#xff1a;在穿过代码和表达式的路径中有哪些已经被执行过行覆盖率: 源代码中每一行代码是否被执行至少一次翻转覆盖率&#xff1a;哪些单比特变量的值为0或1有限状态机覆盖率&#xff1a;状态机中哪些状态和状态转换已经被访问过 语句覆…

Think | 大模型迈向AGI的探索和对齐

注&#xff1a;节选自我于24年初所写的「融合RL与LLM思想探寻世界模型以迈向AGI」散文式风格文章&#xff0c;感兴趣的小伙伴儿可以访问我的主页置顶或专栏收录&#xff0c;并制作了电子书供大家参考&#xff0c;有需要的小伙伴可以关注私信我&#xff0c;因为属于技术散文风格…

NVDLA专题2:具体模块介绍——Bridge DMA

对于NVDLA&#xff0c;输入图像和处理结果存储在外部DRAM中&#xff0c;但外部DRAM带宽和延迟通常不足以让NVDLA充分利用其MAC阵列。因此&#xff0c;NVDLA给片内SRAM配置了第二个存储器接口。 为了利用片内SRAM&#xff0c;NVDLA需要在外部DRAM和SRAM之间移动数据。Bridge DM…

Ubuntu20.04 运行深蓝路径规划hw1

前言 环境&#xff1a; ubuntu 20.04 &#xff1b; ROS版本&#xff1a; noetic&#xff1b; 问题 1、出现PCL报错&#xff1a;#error PCL requires C14 or above catkin_make 编译时&#xff0c;出现如下错误 解决&#xff1a; 在grid_path_searcher文件夹下面的CMakeLis…

若依导出自定义数据处理器

我在编写导出的时候&#xff0c;由于若依的Excel注解基本功能不满足我的需求 比如说我想导出这种样式&#xff0c;30和31天导出时全勤&#xff0c;其他天数显示原本天数 遂了解若依自定义数据处理器 1.首先来到实体类 给注解加上handler和args /** 出勤情况 */Excel(name &…

解决浏览器书签同步问题,极空间部署开源免费的跨平台书签同步工具『xBrowserSync』

解决浏览器书签同步问题&#xff0c;极空间部署开源免费的跨平台书签同步工具『xBrowserSync』 哈喽小伙伴们好&#xff0c;我是Stark-C~ 作为一个喜欢折腾的数码党&#xff0c;我平时上网冲浪使用的浏览器绝不会只限于一种&#xff0c;就比如说我在上班的地方只会用到Edge浏…

项目管理者必读:全生命周期系统选择技巧

国内外主流的10款国外项目管理软件对比&#xff1a;PingCode、Worktile、Trello、Monday.com、ClickUp、Jira、Asana、Tapd、Tower、Teambition。 在管理复杂项目时&#xff0c;选对工具是成功的关键。全生命周期项目管理系统不仅可以帮助你保持项目的进度和预算控制&#xff0…

Windows10配置FFmpeg和使用FFmpeg截取视频流视频

第一部分&#xff1a;Windows10配置FFmpeg 简介&#xff1a;FFmpeg是一个功能强大的多媒体处理工具(用于录制、转换和播放音频和视频)。可以进行转换、剪辑、拼接、过滤等操作。 1、下载FFmpeg工具&#xff08;分Windows和Linux其他&#xff09; Download FFmpeghttps://ffm…

【MySQL】执行DDL选择Online DDL还是PT-OSC?

目录 1.前言2.Online DDL和PT-OSC原理、执行机制以及优缺点2.1.Online DDL2.2.PT-OSC 3.各种常用DDL操作如何选择 1.前言 MySQL DDL&#xff08;Data Definition Language&#xff09;表结构变更&#xff0c;主要支持Online DDL和PT-OSC模式&#xff0c;但是即使知道两者的工作…

谷粒商城实战笔记-173~174-商城业务-检索服务-搭建页面环境-调整页面

文章目录 一&#xff0c;173-商城业务-检索服务-搭建页面环境1&#xff0c;引入thymeleaf2&#xff0c;search模块导入模板页面3&#xff0c;配置域名4&#xff0c;上传静态资源到nginx的html目录5&#xff0c;nginx配置5.1 域名监听配置5.2 静态资源静态配置 6&#xff0c;sea…

Altium Designer 18原理图器件自动标号

前言&#xff1a; 当我们绘制原理图时&#xff0c;元器件的位号是不会自动生成的&#xff0c;位号大都是乱的&#xff0c;造成出图时十分不和谐。 器件位号修改 第一种方法&#xff1a; 可以先修改一个器件位号&#xff0c;按住shift 键然后再拖动器件会生成一个新的&…

Python面试宝典第33题:电话号码的字母组合

题目 给定一个仅包含数字2-9的字符串&#xff0c;返回所有它能表示的字母组合&#xff0c;答案可以按任意顺序返回。给出数字到字母的映射如下图&#xff08;与手机按键相同&#xff09;。注意&#xff1a;1不对应任何字母。 示例 1&#xff1a; 输入&#xff1a;digits &quo…

【网络】IP的路径选择——路由控制

目录 路由控制表 默认路由 主机路由 本地环回地址 路由控制表的聚合 网络分层 个人主页&#xff1a;东洛的克莱斯韦克-CSDN博客 路由控制表 在数据通信中&#xff0c;IP地址作为网络层的标识&#xff0c;用于指定数据包的目标位置。然而&#xff0c;仅有IP地址并不足以确…

Linux 进程间通信之管道

个人主页&#xff1a;仍有未知等待探索-CSDN博客 专题分栏&#xff1a; Linux 目录 一、通信 1、进程为什么要通信&#xff1f; 1.数据的类型 2.父进程和子进程算通信吗&#xff1f; 2、进程如何通信&#xff1f; 3、进程通信的常见方式&#xff1f; 二、管道 1、概念…

SpringBoot中整合Mybatis

一、Mybatis快速入门 1.1、在相应的模块中添加依赖的坐标 首先创建一个maven项目 在对应的pom.xml文件中引入下面的依赖 <dependencies><!--mybatis 依赖--><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artif…