React+echarts实现排名+自动滚动+X轴自定义titleTop

1、效果

2、环境准备

1、react18

2、antd 4+

 3、代码实现

原理：自动滚动通过创建定时器动态更新echar的dataZoom属性startValue、endValue，自定义tooltip通过监听echar的鼠标移入移出事件，判断tooltTip元素的显隐以及位置。

/*** 收集完成率排名 图表*/
import clsx from 'clsx';
import ReactECharts from 'echarts-for-react';
import { useEffect, useRef } from 'react';
import '../index.less';
import { getOption } from './constants';interface ProjectBarConfig {data: any;rollTime?: number;
}const LineECharts = (props: ProjectBarConfig) => {const { rollTime = 5000, data } = props;const chartRef = useRef<ReactECharts>(null);let timer: any = null;// 开启定时器const initialScroll = (dataLen: number, myChart: any) => {const option = myChart.getOption();// 只有当大于10条数据的时候 才会看起来滚动let time = setInterval(() => {if (data.length <= 8) {return;}if (option?.dataZoom[0].endValue >= dataLen - 1) {option.dataZoom[0].endValue = 7;option.dataZoom[0].startValue = 0;} else {option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;}myChart.setOption(option);myChart.setOption({dataZoom: [{type: 'slider',startValue: option.dataZoom[0].startValue,endValue: option.dataZoom[0].endValue,},],});}, Number(rollTime));timer = time;};// 移除y轴tipconst removeAxisTip = () => {let axisTip: any = document.querySelector('.axis-tip');if (axisTip) {axisTip.innerText = '';axisTip.style.display = 'none';}};useEffect(() => {const myChart = chartRef?.current?.getEchartsInstance();let chartDom = chartRef.current?.getEchartsInstance()?.getDom();if (data.length > 8) {initialScroll(data.length, myChart);// 鼠标离开开启定时器chartDom?.addEventListener('mouseout', () => {if (timer) return;initialScroll(data.length, myChart);});}// 移入chartDom?.addEventListener('mouseover', () => {clearInterval(timer);timer = undefined;removeAxisTip();});// yAxis鼠标移入监听myChart?.on?.('mouseover', 'yAxis.category', function (e: any) {let axisTip: any = document.querySelector('.axis-tip');if (axisTip) {axisTip.innerText = e.value;axisTip.style.left = (Number(e?.event?.event?.screenX) || 0) + 'px';axisTip.style.top = (Number(e?.event?.event?.screenY) || 0) + 'px';axisTip.style.display = 'block';}});// });return () => {clearInterval(timer);myChart?.off('mouseover', () => {});chartDom?.removeEventListener('mouseout', () => {});chartDom?.removeEventListener('mouseover', () => {});timer = null;};}, [data]); // 检测数组内变量 如果为空 则监控全局const heightRate = Math.min((data.length || 1) / 8, 1) * 100;return (<divclassName={clsx(['w-full h-full', 'flex flex-row'])}onMouseLeave={() => {removeAxisTip();}}><divclassName={clsx(['flex-auto', 'h-full'])}style={{height: `${heightRate}%`,maxHeight: '100%',minHeight: '20%',}}><ReactEChartsref={chartRef}option={getOption(data)}className={clsx(['h-full w-full'])}style={{ width: '100%', height: '100%' }}/><div className="axis-tip"> </div></div></div>);
};export default LineECharts;

 echar属性配置：

const ranKIconList = ['data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDI4IDIwIiBmaWxsPSJub25lIj4NCiAgPHBhdGggZD0iTTAgMEgyMEwyOCAxMC41TDIwIDIwSDBWMFoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8yNDIxM183MDA4KSIvPg0KICA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMjQyMTNfNzAwOCIgeDE9IjE0IiB5MT0iMCIgeDI9IjE0IiB5Mj0iMjAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRkQxMkUiLz4NCiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGQjgwMCIvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogIDwvZGVmcz4NCjwvc3ZnPg==','data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyMSIgdmlld0JveD0iMCAwIDI4IDIxIiBmaWxsPSJub25lIj4NCiAgPHBhdGggZD0iTTAgMC4yODU2NDVIMjBMMjggMTAuNzg1NkwyMCAyMC4yODU2SDBWMC4yODU2NDVaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMjQyMTNfNzAxMSkiLz4NCiAgPGRlZnM+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzI0MjEzXzcwMTEiIHgxPSIxNCIgeTE9IjAuMjg1NjQ1IiB4Mj0iMTQiIHkyPSIyMC4yODU2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjQThDRkYwIi8+DQogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM4N0I4RTEiLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICA8L2RlZnM+DQo8L3N2Zz4=','data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyMSIgdmlld0JveD0iMCAwIDI4IDIxIiBmaWxsPSJub25lIj4NCiAgPHBhdGggZD0iTTAgMC41NzEyODlIMjBMMjggMTEuMDcxM0wyMCAyMC41NzEzSDBWMC41NzEyODlaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMjQyMTNfNzAxNCkiLz4NCiAgPGRlZnM+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzI0MjEzXzcwMTQiIHgxPSIxNCIgeTE9IjAuNTcxMjg5IiB4Mj0iMTQiIHkyPSIyMC41NzEzIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkFDNjgxIi8+DQogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGNTkzMzgiLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICA8L2RlZnM+DQo8L3N2Zz4=','data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyMSIgdmlld0JveD0iMCAwIDI4IDIxIiBmaWxsPSJub25lIj4NCiAgPHBhdGggZD0iTTAgMC44NTY5MzRIMjBMMjggMTEuMzU2OUwyMCAyMC44NTY5SDBWMC44NTY5MzRaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMjQyMTNfNzAxNykiLz4NCiAgPGRlZnM+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzI0MjEzXzcwMTciIHgxPSIxNCIgeTE9IjAuODU2OTM0IiB4Mj0iMTQiIHkyPSIyMC44NTY5IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMEM0MjdDIi8+DQogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwODM1NjYiLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICA8L2RlZnM+DQo8L3N2Zz4=',
];
// 配置调色板
export const colorPalette = [['#2EF2FF', '#2EB3FF'],['#FFD12E', '#FFB82E'],['#8EED15', '#00CF61'],['#CFCFCF', '#999'],['#FF7D54', '#FF2E2E'],['#00F3E5', '#00D4D6'],
].map(([startColor, endColor]) => ({type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: startColor, // 0% 处的颜色},{offset: 1,color: endColor, // 100% 处的颜色},],global: false, // 缺省为 false
}));export const getOption = (result) => {return {//   color: '2379FF',//   backgroundColor: '#000416',color: colorPalette,tooltip: {show: true,trigger: 'axis',padding: [8, 15],backgroundColor: 'rgba(1, 15, 29, 80%)',fontWeight: 700,borderColor: 'rgba(46, 179, 255, 50%)',textStyle: {color: 'rgba(255, 255, 255, 1)',},},legend: {show: false,},grid: {left: '100',right: '52',top: '0',bottom: '4',},xAxis: [{splitLine: {show: false,},type: 'value',show: false,axisLine: {show: false,},},],yAxis: [{triggerEvent: true,splitLine: {show: false,},axisLine: {show: false,},// type: 'category',axisTick: {show: false,},inverse: true,// offset: 10,data: result.map((item) => item.projectName),axisLabel: {color: '#fff',fontSize: 12,// marginLeft: 12,overflow: 'truncate',ellipsis: '...',margin: 110,align: 'left',formatter: (value) => {const valueNew =value.length > 4 ? `${value.slice(0, 4)}...` : value;const index = result.findIndex((item) => item.projectName === value,);if (index < 3) {return `{icon${index + 1}|${index + 1}} {a|${valueNew}}`;} else {return `{icon0|${index + 1}} {a|${valueNew}}`;}},rich: {icon0: {width: 28,height: 18,fontSize: 12,align: 'center',verticalAlign: 'middle',color: '#fff',padding: [3, 4], //[上, 右, 下, 左]fontWeight: 400,backgroundColor: {image: ranKIconList[3],},},icon1: {width: 28,height: 18,fontSize: 12,align: 'center',verticalAlign: 'middle',padding: [3, 4], //[上, 右, 下, 左]backgroundColor: {image: ranKIconList[0],},},icon2: {fontSize: 12,align: 'center',verticalAlign: 'middle',padding: [3, 4], //[上, 右, 下, 左]width: 28,height: 18,backgroundColor: {// image: bg,image: ranKIconList[1],},},icon3: {width: 28,height: 18,fontSize: 12,verticalAlign: 'middle',padding: [3, 4], //[上, 右, 下, 左]align: 'center',backgroundColor: {image: ranKIconList[2],},},a: {fontSize: '12px',color: '#B8D3F1',align: 'center',},z: {width: 6,height: 6,},},},},],series: [{type: 'bar',label: {show: true,position: 'right',// distance: 0,textStyle: {fontSize: 12,color: '#2EB3FF', // 值文字颜色},formatter: (value) => {return `{a|${value?.data}%}`;},rich: {a: {fontSize: 12,fontWeight: 500,color: '#2EB3FF', // 值文字颜色fontStyle: 'normal',fontFamily: 'Arial',padding: [0, 8, 0, 8], //[上, 右, 下, 左]},b: {fontSize: 14,},},},itemStyle: {normal: {fontWeight: 400,// color: function(params) {//   return barShadowColor[params.dataIndex]// },opacity: 0.8,},},barWidth: 8,data: result.map((item) => item.value),// barGap:2,z: 2,},{name: '背景',type: 'bar',tooltip: { show: false },barWidth: 12,barHeight: 20,barGap: '-100%',// z: -1},],dataZoom: [{yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始show: false, // 是否显示滑动条，不影响使用type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件startValue: 0, // 从头开始。endValue: 7, // 展示到第几个。},],};
};

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

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

相关文章

【Java EE】----Spring框架创建和使用

【Java EE】----Spring框架创建和使用

1.Spring框架创建 创建一个maven项目 添加Spring框架支持 <dependencies> 上下文<dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.2.3.RELEASE</version></depende…
阅读更多...
【网站项目】038汽车养护管理系统

【网站项目】038汽车养护管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…
阅读更多...
java -jar启动SpringBoot项目时配置文件加载位置与优先级

java -jar启动SpringBoot项目时配置文件加载位置与优先级

服务部署启动时,我们经常需要指定配置文件启动. 一般有四种,优先级如下 spring.config.location > spring.profiles.active > spring.config.additional-location > 默认的 application.yml 1.spring.config.location 外部配置文件优先级最高 一般配置文件在服务…
阅读更多...
PS之外的平面设计利器：7款高效软件帮你轻松搞定

PS之外的平面设计利器：7款高效软件帮你轻松搞定

平面图设计的痕迹体现在日常生活的方方面面&#xff0c;如路边传单、杂志、产品包装袋或手机开屏海报等&#xff0c;平面设计软件层出不穷。Photoshop是大多数平面图设计初学者的入门软件&#xff0c;但随着设计师需求的不断提高&#xff0c;平面图设计软件Photoshop逐渐显示出…
阅读更多...
SpringBoot：自动配置报告

SpringBoot：自动配置报告

自动配置报告demo&#xff1a;点击查看 LearnSpringBoot03AutoConfig 点击查看更多的SpringBoot教程 一、application.properties代码 #开启springboot debug模式 #自动配置报告 #Positive matches: 自动配置类启用了&#xff08;自动配置类匹配上了&#xff09;&#xff0c…
阅读更多...
【动态规划】【图论】【C++算法】1928规定时间内到达终点的最小花费

【动态规划】【图论】【C++算法】1928规定时间内到达终点的最小花费

作者推荐 【动态规划】【状态压缩】【2次选择】【广度搜索】1494. 并行课程 II 本文涉及知识点 动态规划汇总 LeetCode1928. 规定时间内到达终点的最小花费 一个国家有 n 个城市&#xff0c;城市编号为 0 到 n - 1 &#xff0c;题目保证 所有城市 都由双向道路 连接在一起…
阅读更多...
【python】绘制春节烟花

【python】绘制春节烟花

一、Pygame库春节烟花示例 下面是一个使用Pygame实现的简单春节烟花效果的示例代码。请注意&#xff0c;运行下面的代码之前&#xff0c;请确保计算机上已经安装了Pygame库。 import pygame import random import math from pygame.locals import *# 初始化pygame pygame.ini…
阅读更多...
Spring Boot配置文件优先级

Spring Boot配置文件优先级

1、bat文件启动java程序 java -Dmmmqqq -Dfile.encodingUTF-8 -jar ruoyi-admin.jar --mmmiii --llllll 2、配置类型 程序参数Program arguments : --mmmiii 单个属性值&#xff0c;可以从String[] args读取到&#xff0c;放在jar包命令后面 VM参数VM options :一般以-D …
阅读更多...
如何让 Pages 文字分为两栏或更多栏？

如何让 Pages 文字分为两栏或更多栏？

通常一份文件都是由上往下仅有「一栏」而已&#xff0c;但在某些情况的排版&#xff0c;我们需要两栏甚至三栏的设计&#xff0c;在Pages 要如何做到呢&#xff1f;来看看吧。 将 Pages 文件改为双栏式设计 点一下「格式」>「布局」&#xff0c;就可以看到预设的「直栏」数…
阅读更多...
C++：哈希表的哈希桶（模拟实现）

C++：哈希表的哈希桶（模拟实现）

在这里不赘述哈希表的相关性质有兴趣的参考线性探测&#xff0c;这里直接贴代码 template<class T>struct HashNode{T _data;HashNode<T>* _next;HashNode(const T& data):_data(data), _next(nullptr){}};template<class K, class T, class KOFV>class …
阅读更多...
SpringMVC-请求

SpringMVC-请求

一、引子 我们在上一篇SpringMVC-响应中提到了如何给客户端返回响应&#xff0c;那么本节来介绍一下如何承接客户端的响应。 二、接收参数 &#xff08;1&#xff09;使用RequestParam注解&#xff1a; RequestMapping(value "/example", method RequestMethod…
阅读更多...
LeetCode-第2469题=温度转换

LeetCode-第2469题=温度转换

1.题目描述 给你一个四舍五入到两位小数的非负浮点数 celsius 来表示温度&#xff0c;以 摄氏度&#xff08;Celsius&#xff09;为单位。 你需要将摄氏度转换为 开氏度&#xff08;Kelvin&#xff09;和 华氏度&#xff08;Fahrenheit&#xff09;&#xff0c;并以数组 ans …
阅读更多...
【AI数字人-论文】GeneFace++

【AI数字人-论文】GeneFace++

文章目录 前言pipelinePitch-Aware Audio-to-MotionLandmark LLELLELandmark LLE Instant motion-to-video rendering结果对比 前言 为了提高预测的面部关键点序列的长期时间一致性和自然度&#xff0c;我们提出了一个Pitch-Aware Audio-to-Motion音高感知的音频到动作模块。具…
阅读更多...
Spring是怎么解决循环依赖的

Spring是怎么解决循环依赖的

首先先解释一下什么叫循环依赖 循环依赖:循环依赖其实就是循环引用,也就是两个或两个以上的bean互相持有对方,最终形成闭环.比如A依赖于B,B依赖于A 循环依赖在spring中是允许存在的,spring框架依据三级缓存已经解决了大部分的循环依赖 一级缓存:单例池,缓存已经经历了完整的…
阅读更多...
Java字符串(包含字母和数字)通用排序

Java字符串(包含字母和数字)通用排序

说明&#xff1a;本文章是之前查到的一篇安卓版的&#xff0c;具体原文路径忘记了。稍微改了一点&#xff0c;挺符合业务使用的&#xff01; 一、看代码 /*** 包含数字的字符串进行比较&#xff08;按照从小到大排序&#xff09;*/private static Integer compareString(Stri…
阅读更多...
Character包装类常用方法（Java）

Character包装类常用方法（Java）

Character包装类常用方法 Character 类是 char 基本数据类型的包装类&#xff0c;用于提供对字符数据的操作和封装。 1. isDigit(char ch) 方法示例&#xff1a; 判断指定字符是否是一个数字&#xff08;0-9&#xff09;。返回值为 boolean 类型。 char ch1 5; char ch2 …
阅读更多...
时序预测 | MATLAB实现基于CNN-LSTM-AdaBoost卷积长短期记忆网络结合AdaBoost时间序列预测

时序预测 | MATLAB实现基于CNN-LSTM-AdaBoost卷积长短期记忆网络结合AdaBoost时间序列预测

时序预测 | MATLAB实现基于CNN-LSTM-AdaBoost卷积长短期记忆网络结合AdaBoost时间序列预测 目录 时序预测 | MATLAB实现基于CNN-LSTM-AdaBoost卷积长短期记忆网络结合AdaBoost时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于CNN-LST…
阅读更多...
vue3 之 商城项目—layout静态模版结构搭建

vue3 之 商城项目—layout静态模版结构搭建

layout—模块静态模版搭建 一般情况下我们会有nav区域&#xff0c;header区域&#xff0c;二级路由出口区域以及footer区域&#xff0c;如图 我们在开发的时候先把大模块搭建起来&#xff0c;再一步一步填充小模块 在layout下建文件&#xff0c;目录如下 在index.vue中把上…
阅读更多...
基于springboot+vue+mysql员工宿舍管理系统

基于springboot+vue+mysql员工宿舍管理系统

技术栈 jdk8springboot vueelement-plusMySQL 包含功能点 管理员端 登录员工管理宿舍管理留言板管理物品报修管理公告管理 员工端 登录首页个人中心物品报修留言板 功能截图(部分) 管理员 管理员登录 员工管理 宿舍管理 物品报修管理 公告管理 留言管理 员工 员工登录…
阅读更多...
数据库管理-第145期 最强Oracle监控EMCC深入使用-02（20240205）

数据库管理-第145期 最强Oracle监控EMCC深入使用-02（20240205）

数据库管理145期 2024-02-05 数据库管理-第145期 最强Oracle监控EMCC深入使用-02&#xff08;20240205&#xff09;1 监控方式2 度量配置3 阻塞4 DG监控总结 数据库管理-第145期 最强Oracle监控EMCC深入使用-02&#xff08;20240205&#xff09; 作者&#xff1a;胖头鱼的鱼缸&…
阅读更多...
最新文章

Copyright @ 2022~2023