React中echarts的封装

news/2024/3/29 17:16:36/文章来源:https://blog.csdn.net/zz130428/article/details/129254547

做大屏的时候经常会遇到 echarts 展示

在 React (^18.2.0) 中对 echarts (^5.4.0) 的简单封装

echarts 封装使用

props 说明

参数说明类型可选值默认值
opts初始化传入的 opts https://echarts.apache.org/zh/api.html#echarts.initopen in new windowObject-{renderer: 'svg'}
options配置项,对应 https://echarts.apache.org/zh/option.html#titleopen in new windowObject-{}
seriesDataseries 数据配置内容https://echarts.apache.org/zh/option.html#seriesopen in new window,数据变更自动更新Array-[]
intervalTime自动切换的时间跨度,指自动切换 高亮 + tooltip 展示,例子open in new windowNumber-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;

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

硬件工程师——门控开关的设计

假设自己是一个工程师&#xff0c;那么我们怎么介绍自己呢&#xff1f; 我们首先需要可以自己独立设计项目&#xff0c;需要每一个工程师在开始阶段可以独立做项目&#xff0c;从而提高薪水 那么我们怎么提高做项目的能力呢&#xff1f; 通过项目来积累经验&#xff0c;在短…

推荐几个实用的在线教程(建议收藏)

hello&#xff0c;大家好&#xff0c;我是木荣君。作为一名技术人员&#xff0c;工作中熟练使用各种管理及设计工具是一项必备的技能。今天给大家分享一下我工作中经常查看和学习的几个在线教程地址。供大家参考学习&#xff0c;建议收藏&#xff0c;真的很实用&#xff01; Gi…

InnoDB数据页结构__盛放记录的大盒子

一、不同类型的页简介 前边我们简单提了一下页的概念&#xff0c;它是InnoDB管理存储空间的基本单位&#xff0c;一个页的大小一般是16KB。InnoDB为了不同的目的而设计了许多种不同类型的页&#xff0c;比如存放空间头部信息的页&#xff0c;存放Insert Buffer信息的页&#xf…

MySQL 横表和竖表相互转换

一 竖表转横表 1. 首先创建竖表 create table student ( id varchar(32) primary key, name varchar (50) not null, subject varchar(50) not null, result int); 2. 插入数据 insert into student (id, name, subject, result) values (0001, 小明, 语文, 83); insert into…

一文透视宝莱特CRM如何建设与落地

宝莱特集团成立于1993年&#xff0c;是一家国家高新技术企业&#xff0c;始终坚持在医疗器械领域的深耕细作&#xff0c;坚持患者第一、临床优先&#xff0c;业务板块涵盖生命信息与支持、肾病医疗和大健康医疗三大领域。自成立以来&#xff0c;宝莱特推出了多个中国第一的自主…

八通道触摸芯片GTC08L Pin to Pin替代启攀微八通道触摸芯片

能Pin to Pin替代启攀微八通道触控芯片的电容式触摸芯片-GTC08L是一款非常适用于小功率音箱上超稳定超抗干扰低功耗八通道电容式触摸IC&#xff1b;可通过触摸实现各种逻辑功能控制&#xff1b;可以在发动机运行下进行8通道电容传感&#xff1b;对电磁兼容、电磁干扰、温湿度变…

Java的运算操作

个人主页&#xff1a;平行线也会相交 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 平行线也会相交 原创 收录于专栏【JavaSE_primary】 文章目录算术运算符增量运算符注意自增自减运算符关系运算符逻辑运算符逻辑与&&逻辑或||逻辑非&#xff01;…

华为OD机试题,用 Java 解【考古学家】问题

最近更新的博客 华为OD机试题,用 Java 解【停车场车辆统计】问题华为OD机试题,用 Java 解【字符串变换最小字符串】问题华为OD机试题,用 Java 解【计算最大乘积】问题华为OD机试题,用 Java 解【DNA 序列】问题华为OD机试 - 组成最大数(Java) | 机试题算法思路 【2023】使…

VB6遍历目录(文件夹和文件)

日期&#xff1a;2023年2月27日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…

产业链金融对接央行征信过程

2018年10月底&#xff0c;央行二代征信系统上线试运行。2018年10月至2019年4月&#xff0c;央行二代征信系统 进行试运行&#xff0c;全国16家试点机构参与全业务试运行&#xff0c;14家机构进行查询试点。2019年6月&#xff0c;央行二 代征信系统正式上线。2019年6月至2020年1…

计算机信息系统安全服务等级证

计算机信息系统安全服务等级评定是规范行业服务、提升企业诚信度、保证工程质量、市场准入控制的重要保证&#xff0c;是安全服务机构从事信息网络安全服务能力的等级证明&#xff0c;为我省信息化建设使用单位在选择网络安全服务机构时提供参考依据。 等级划分 安全服务机构等…

Java中常用的七种队列你了解多少?

文章目录Java中常用的七种队列你了解多少?ArrayBlockingQueue队列如何使用&#xff1f;添加元素到队列获取队列中的元素遍历队列LinkedBlockingQueue队列如何使用&#xff1f;1. 创建SynchronousQueue对象2. 添加元素到队列3. 获取队列中的元素4. 遍历队列SynchronousQueue队列…

我要测网2022优秀检测机构评选活动举办,径硕科技分享数字营销趋势

2023年2月17号&#xff0c;由我要测网主办的「数字营销韧性增长&#xff5c;2023TIC营销人开年报告」圆满举办。来自南京市产品质量监督检验院、中国检科院测试评价中心、径硕科技JINGdigital等企业的3位“重量级”嘉宾进行了精彩纷呈的分享&#xff0c;为在低谷中前行的检测机…

我嘞个神——原来创建应用根本不需要会编码(看我10分钟应用上线)

目录 一、前言 二、官网功能查询与环境初始化 YonBuilder应用开发 三、测试过程 3.1、创建应用 3.2、数据建模 3.3、页面建模 3.4、页面发布 四、时间累计 五、效率评价 六、总结 一、前言 这里我用到了用友的平台&#xff0c;很多学生们刚毕业都在从事运维和实施的…

Java基础:常见API(Math,System,Runtime,Object,BigInteger,BigDecima)

1.常见API 1.1 Math类 向上取整是向着数轴右边走的意思, 负数也是. 也可以叫进一法, 不论正数负数都会往右走一. 向下取整是向着数轴左边走. 也可以叫去尾法, 不论正负数都会将小数点后的数字去掉. 1.1.2 练习 // 判断有多少水仙花数int count 0;for (int i 100; i < 1…

如何在没有任何额外包的情况下使用 NodeJS 下载文件

如何在没有任何额外包的情况下使用 NodeJS 下载文件 您可以下载文件&#xff08;图像、文本或任何类型的文件&#xff09;并使用 NodeJS 内置 https和 fs模块将其保存到您的文件系统。 该 https模块允许您使用 NodeJS 创建 HTTPS 请求&#xff0c;同时该 fs模块授予您访问文件…

【论文精读11】MVSNet系列(2018-2022)总结

MVSNet系列总结1.MVSNet ECCV20182.RMVSNet CVPR20193.P-MVSNet ICCV20194.MVSCRF ICCV20195.PointMVSNet ICCV20192019年的这四篇文章各有特点&#xff0c;其中RMVSNet、PointMVSNet更是打开了可以继续沿着往下做的思路&#xff1a;6.cascade MVSNet CVPR20207.UCSNet CVPR202…

Python-GEE遥感云大数据分析、管理与可视化技术及多领域案例实践应用

随着航空、航天、近地空间等多个遥感平台的不断发展&#xff0c;近年来遥感技术突飞猛进。由此&#xff0c;遥感数据的空间、时间、光谱分辨率不断提高&#xff0c;数据量也大幅增长&#xff0c;使其越来越具有大数据特征。对于相关研究而言&#xff0c;遥感大数据的出现为其提…

Python基础—while循环

(1)while循环&#xff1a; 语法格式&#xff1a; while 条件&#xff1a;   执行语句1……   执行语句2…… 适用条件&#xff1a;无限循环 死循环 while True:print(条件是真的&#xff01;)代码实例&#xff1a; i 0 # 创建一个计数的变量 while i < 5: # Truepr…

一个容易被忽视的标签 —— iframe

前言 甲问&#xff1a;说说你知道的HTML标签。 乙于是说了一大堆标签&#xff0c;比如div&#xff0c;span等等。 甲说&#xff1a;那你知道 iframe 标签吗&#xff1f; 乙这时候迟疑了片刻&#xff0c;缓缓说出&#xff1a;知道它&#xff0c;但是不太了解这个标签。 HTM…