当前位置: 首页 > news >正文

React echarts封装

做大屏的时候经常会遇到 echarts 展示,下面展示在 React (^18.2.0) 中对 echarts (^5.4.0) 的简单封装。

文章首发于https://blog.fxss.work/react/echarts封装.html,样例查看

echarts 封装使用

props 说明

参数说明类型可选值默认值
opts初始化传入的 opts https://echarts.apache.org/zh/api.html#echarts.initObject-{renderer: 'svg'}
options配置项,对应 https://echarts.apache.org/zh/option.html#titleObject-{}
seriesDataseries 数据配置内容https://echarts.apache.org/zh/option.html#series,数据变更自动更新Array-[]
intervalTime自动切换的时间跨度,指自动切换 高亮 + tooltip 展示,例子Number-1500
autoPlay是否自动播放,指的是是否自动添加切换 高亮 + tooltip 展示Boolean-true
isAddOn是否自动添加鼠标上移事件,切换 高亮 + tooltip 展示的时候,鼠标再移动到其他需要高亮显示上时,自动停止切换动画,鼠标移开自动继续播放Boolean-true
onRefref实例使用,在父组件中const echartsRef = React.createRef();...<EchartsModule onRef={echartsRef} />---
className添加样式String-''

方法

方法名说明参数
echartsInstance返回 echarts 实例,如果功能不满足,自己定义-
echartsPlayecharts开启动画,对外开放,可手动调用clear = false, seriesIndex = 0, dataIndex = -1clear: 是否立即开始动画,并清除上个定时器,开启下个定时器,默认为 false;seriesIndex: series 中的第几项数据,默认为 0;dataIndex: series[seriesIndex].data 中的第几项,默认为 -1
echartsPauseecharts关闭动画,对外开放,可手动调用-

使用

如下演示 echarts 封装使用:

可以将如下代码拷贝到项目运行,更方便查看效果

import { Button, Typography, theme } from "antd";
import React from "react";
import EchartsModule from "../../components/EchartsModule";const { Title } = Typography;
const { useToken } = theme;const PageDemo = () => {const { token } = useToken();const { colorText, colorBgContainer, colorBorder } = token;const echartsRef = React.createRef();const options = {textStyle: {color: colorText,},title: {text: '饼图程序调用高亮示例',left: 'center',textStyle: {color: colorText,},},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)',confine: true,className: 'echart-tooltip-zIndex',backgroundColor: colorBgContainer,borderColor: colorBorder,textStyle: {color: colorText,},},legend: {orient: 'vertical',left: 'left',data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],textStyle: {color: colorText,},}}const seriesData = [{name: '访问来源',type: 'pie',radius: '55%',center: ['50%', '60%'],lable: {textStyle: {color: colorText,},},data: [{ value: 335, name: '直接访问' },{ value: 310, name: '邮件营销' },{ value: 234, name: '联盟广告' },{ value: 135, name: '视频广告' },{ value: 1548, name: '搜索引擎' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,}}}]const changeDate = () => {echartsRef.current.echartsPlay(true, 0, -1)}const changeDate1 = () => {echartsRef.current.echartsPause()}const changeDate2 = () => {const echartsInstance = echartsRef.current.echartsInstance()echartsInstance.clear()echartsInstance.dispose()}return (<div><Title level={3}>6、通过 ref 调用开始结束动画,使用 ref 调用的好处是可以指定在第几项开始动画</Title><div><Button onClick={changeDate}>开始动画</Button><Button className="ml-2" onClick={changeDate1}>结束动画</Button><Button className="ml-2" onClick={changeDate2}>获取实例,销毁echarts</Button></div><div className="w-full h-80"><EchartsModule onRef={echartsRef} options={options} seriesData={seriesData}></EchartsModule></div></div>);
};export default PageDemo;

代码封装

import { useEffect, useImperativeHandle, useRef } from "react";
import * as echarts from 'echarts';
import { useDeepCompareEffect, useMount, useSize, useUnmount, useUpdateEffect } from "ahooks";
import classNames from 'classnames';const EchartsModule = ({// https://echarts.apache.org/zh/api.html#echarts.init// 初始化传入的 optsopts = { renderer: 'svg' },// 配置项options = {},// 数据集合seriesData = [],// 自动切换的时间跨度intervalTime = 1500,// 是否自动播放autoPlay = true,// 是否自动添加鼠标上移事件isAddOn = true,onRef,className = ''
}) => {const echartsRef = useRef(null);let myChart = useRef(null);let echartsOptions = useRef({});let myChartEventTime = useRef(null);let currentSeriesIndex = useRef(0);let currentDataIndex = useRef(-1);let timer = useRef(intervalTime);// 是否调用过 echartsPlaylet isEchartsPlay = useRef(false);// echarts初始化function init() {destroyEchart() //判断是否有echart实例,如果有,先销毁myChart.current = echarts.init(echartsRef.current, null, opts)update()if (isAddOn) {addEventFn()}}// 绑定事件function addEventFn() {// 鼠标移上查看的时候,暂停动画myChart.current.on('mouseover', 'series', event => {// 取消之前高亮的图形myChart.current.dispatchAction({type: 'downplay',seriesIndex: currentSeriesIndex.current,dataIndex: currentDataIndex.current})echartsPause()})// 鼠标移出的时候打开动画myChart.current.on('mouseout', 'series', event => {// 自动播放 或者 调用过 echartsPlayif (autoPlay || isEchartsPlay.current) echartsPlay(true, event.seriesIndex, event.dataIndex - 1)})}// 移除事件function removeEventFn() {myChart.current.off('mouseover')myChart.current.off('mouseout')}// 数据更新function update() {// 逻辑处理组件options参数const curOptions = {...options,series: seriesData// other options here ...}echartsOptions.current = curOptions// 调用ECharts组件setOption更新myChart.current.setOption(curOptions, true)if (curOptions.series.length && autoPlay) {myChart.current.dispatchAction({type: 'highlight',seriesIndex: currentSeriesIndex.current,dataIndex: currentDataIndex.current})// 显示 tooltipmyChart.current.dispatchAction({type: 'showTip',seriesIndex: currentSeriesIndex.current,dataIndex: currentDataIndex.current})echartsPlay(false, currentSeriesIndex.current, currentDataIndex.current <= seriesData[currentSeriesIndex.current].data.length - 1 ? currentDataIndex.current : -1)}}// 销毁echartsfunction destroyEchart() {if (myChart.current) {if (isAddOn) {removeEventFn()}if (typeof myChart.current.clear === 'function') myChart.current.clear()if (typeof myChart.current.dispose === 'function') myChart.current.dispose()myChart.current = null}}/*** echarts开启动画,可手动调用* clear: 是否立即开始动画,并清除上个定时器,开启下个定时器,默认为 false* seriesIndex: series 中的第几项数据,默认为 0* dataIndex: series[seriesIndex].data 中的第几项,默认为 -1*/function echartsPlay(clear = false, seriesIndex = 0, dataIndex = -1) {if (clear) {echartsPause()}isEchartsPlay.current = truecurrentSeriesIndex.current = seriesIndexcurrentDataIndex.current = dataIndexif (!myChartEventTime.current) {echartsEventPlay(seriesIndex)}}function echartsTimeout(seriesIndex = 0) {myChartEventTime.current = setTimeout(() => {echartsEventPlay(seriesIndex)}, timer.current)}function echartsEventPlay(seriesIndex = 0) {const dataLen = echartsOptions.current.series[seriesIndex].data.lengthif (myChart.current && myChart.current.dispatchAction) {// 取消之前高亮的图形myChart.current.dispatchAction({type: 'downplay',seriesIndex,dataIndex: currentDataIndex.current})currentDataIndex.current = (currentDataIndex.current + 1) % dataLen// 高亮当前图形myChart.current.dispatchAction({type: 'highlight',seriesIndex,dataIndex: currentDataIndex.current})// 显示 tooltipmyChart.current.dispatchAction({type: 'showTip',seriesIndex,dataIndex: currentDataIndex.current})}echartsTimeout(seriesIndex)}// echarts关闭动画,可手动调用function echartsPause() {if (myChart.current && myChart.current.dispatchAction) {// 取消之前高亮的图形myChart.current.dispatchAction({type: 'downplay',seriesIndex: currentSeriesIndex.current,dataIndex: currentDataIndex.current})// 取消显示 tooltipmyChart.current.dispatchAction({type: 'hideTip'})}if (myChartEventTime.current) {clearTimeout(myChartEventTime.current)myChartEventTime.current = null}}// 重置大小const echartsResize = () => {if (myChart.current) myChart.current.resize()}useMount(() => {init()})useUnmount(() => {echartsPause()destroyEchart()})useDeepCompareEffect(() => {update()}, [seriesData])useUpdateEffect(() => {if (autoPlay) {echartsPlay(false, currentSeriesIndex.current, currentDataIndex.current)} else {echartsPause()}}, [autoPlay])useUpdateEffect(() => {timer.current = intervalTime}, [intervalTime])useUpdateEffect(() => {if (isAddOn) {addEventFn()} else {removeEventFn()}}, [isAddOn])const size = useSize(echartsRef)useEffect(() => {echartsResize()}, [size])useImperativeHandle(onRef, () => {return {echartsInstance: () => myChart.current,echartsPlay,echartsPause}});return (<div ref={echartsRef} className={classNames('w-full h-full', className)}></div>);
};export default EchartsModule;

相关文章:

React echarts封装

做大屏的时候经常会遇到 echarts 展示&#xff0c;下面展示在 React &#xff08;^18.2.0&#xff09; 中对 echarts &#xff08;^5.4.0&#xff09; 的简单封装。 文章首发于https://blog.fxss.work/react/echarts封装.html&#xff0c;样例查看 echarts 封装使用 props 说…...

【C语言进阶】了解计算机的程序环境和预处理过程 掌握计算机预处理操作

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;C语言进阶 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录1.编译与链接1.1 程…...

(三十六)大白话数据库幻读,本质到底是个什么问题?

上一讲我们给大家讲解了不可重复读这个问题&#xff0c;这个问题简单来说&#xff0c;就是一个事务多次查询一条数据&#xff0c;结果每次读到的值都不一样&#xff0c;这个过程中可能别的事务会修改这条数据的值&#xff0c;而且修改值之后事务都提交了&#xff0c;结果导致人…...

【算法经典题集】递归(持续更新~~~)

&#x1f63d;PREFACE&#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐ 评论&#x1f4dd;&#x1f4e2;系列专栏&#xff1a;算法经典题集&#x1f50a;本专栏涉及到的知识点或者题目是算法专栏的补充与应用&#x1f4aa;种一棵树最好是十年前其次是现在1.递归1.1 递归实现…...

多区域的OSPF实战配置

多区域的OSPF实战配置 需求 如图配置设备的接口IP地址如图规划OSPF网络的区域要求每个设备的 router-id 都是 x.x.x.x&#xff08;x是每个路由器的名字&#xff09;确保不同的PC之间可以互通 拓扑图 配置命令 PC1&#xff1a; 192.168.1.1 255.255.255.0 192.168.1.254PC2:…...

现在转行做程序员的多吗?

曾经有一名程序员说&#xff0c;他在编写程序时&#xff0c;就像一个发明家在做实验&#xff1b;当他把程序编好可以运行时&#xff0c;他就已经是个发明家了。 程序员作为众多转行人员首选的职业&#xff0c;也是被大众熟知了。但我们需要知道的不仅是它作为一个职业的定义&a…...

社招前端常见react面试题(必备)

解释 React 中 render() 的目的。 每个React组件强制要求必须有一个 render()。它返回一个 React 元素&#xff0c;是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素&#xff0c;则必须将它们组合在一个封闭标记内&#xff0c;例如 <form>、<group>、<div&g…...

力扣-变更性别

大家好&#xff0c;我是空空star&#xff0c;本篇带大家了解一道简单的力扣sql练习题。 文章目录前言一、题目&#xff1a;627. 变更性别二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.正确示范④提交SQL运行结果5.其他总结前言…...

【项目精选】医院管理住院系统的研究与实现(源码+论文+视频)

点击下载源码 本系统主要分为六大模块&#xff0c;分别是医生管理模块、病人管理模块、病床管理模块、收费管理模块、统计分析模块和系统功能模块 &#xff0c;医生、病人和医院的管理人员都可以通过此系统寻找出自己所需要的信息。 1.1 背景 医院管理住院系统是当今大部分现代…...

Lenovo Legion Y530-15ICH电脑 Hackintosh 黑苹果efi引导文件

原文来源于黑果魏叔官网&#xff0c;转载需注明出处。硬件型号驱动情况主板Lenovo Legion Y530-15ICH处理器Intel Core™ i7-8750H (Coffee-Lake)已驱动内存16GB RAM DDR4 2667MHz已驱动硬盘2TB HP EX950 PCI-E Gen3 x4 NVMe SSD已驱动显卡Intel UHD Graphics 630Nvidia GTX 10…...

CICD 导航

目录内容链接产研服务产研服务参考文章&#xff1a;【产研】 服务部署配置及使用产研服务问题解决参考文章&#xff1a;【问题解决】产研.Net服务部署 配置 使用代码托管GitlabGitlab参考文章&#xff1a;Gitlab 安装 与 使用代码托管Gitlab问题解决参考文章&#xff1a;【问题…...

xgboost学习-原理

文章目录一、xgboost库与XGB的sklearn APIXGBoost的三大板块二、梯度提升树提升集成算法&#xff1a;重要参数n_estimators三、有放回随机抽样&#xff1a;重要参数subsample四、迭代决策树&#xff1a;重要参数eta总结一、xgboost库与XGB的sklearn API 现在&#xff0c;我们有…...

如何查看CUDA版本

Linux 查看CUDA版本&#xff1a; nvcc --version或 nvcc --VWindows 查看CUDA版本&#xff1a; nvcc --version或进入 CUDA 的安装目录查看&#xff1a; C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA使用PyTorch 查看 CUDA 版本 import torch print(torch.__ver…...

三、iperf3代码主要架构分析之main函数主要流程

iperf3是一个非常强大的工具&#xff0c;它是用C语言编写的。同时iperf3也是用C语言实现面向对象编程的典范&#xff0c;他以数据结构函数指针为基础&#xff0c;非常好的用C语言实现面向对象的编程的三大特征&#xff1a;封装&#xff0c;继承&#xff0c;多态。相信通过阅读i…...

【概念辨析】大小端存储

一、情境 在进行内存调试窗口的查看时&#xff0c;是不是会有一种错觉&#xff0c;就是它存的数据与我们预期的都是颠倒的&#xff0c;比如&#xff1a; 这里的a就和我们预期的不是很相同。 二、大小端 大小端是计算机厂家根据自己的习惯制定的关于数据字节序的规则。 1.大端…...

并发编程-学习总结(下)

目录 1、Future 1.1、Callable和Runnable的不同 1.2、Future的主要功能 1.3、常用方法 1.4、Future使用注意事项 1.5、CompletableFuture(旅游平台问题) 1.5.1、需求 1.5.2、解决方案1&#xff1a;串行 1.5.3、解决方案2&#xff1a;线程池 1.5.4、解决方案3&#xf…...

arm汇编指令详细整理及实例详解

目录一、简介二、ARM 汇编指令说明2.1 32位数据操作指令2.2 32位存储器数据传送指令2.3 32位转移指令2.4 其它32位指令三、实例讲解3.1 MRS3.2 MSR3.3 PRIMASK3.4 FAULTMASK3.5 BX指令3.6 零寄存器 wzr、xzr3.7 立即寻址指令3.8 寄存器间接寻址指令3.9 寄存器移位寻址指令3.10 …...

高等数学笔记(下下)

无穷级数 定义 一般的&#xff0c;如果给定一个数列u1,u2,u3,...un,...,u_1, u_2, u_3, ... u_n, ... ,u1​,u2​,u3​,...un​,...,&#xff0c;那么由这个梳理构成的表达式u1u2u3...un...u_1u_2u_3...u_n...u1​u2​u3​...un​...叫做(常数项)无穷级数&#xff0c;简称(常…...

零基础如何入门网络安全(黑客)

我经常会看到这一类的问题&#xff1a; 学习XXX知识没效果&#xff1b;学习XXX技能没方向&#xff1b;学习XXX没办法入门&#xff1b; 给大家一个忠告&#xff0c;如果你完全没有基础的话&#xff0c;前期最好不要盲目去找资料学习&#xff0c;因为大部分人把资料收集好之后&a…...

【C++】map和set用法详解

文章目录1.关联式容器2.键值对3.树形结构的关联式容器3.1 set3.1.1 set的介绍3.1.2 set的模板参数列表3.1.3 set的使用3.2 mapmap的介绍map的模板参数列表map的使用关于map的元素访问总结3.3multimap1.关联式容器 我们接触过STL中的部分容器&#xff0c;比如&#xff1a;vecto…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...