react+ echarts 轮播饼图
react+ echarts 轮播饼图
图片示例
代码
import * as echarts from 'echarts';
import { useEffect } from 'react';
import styles from './styles.scss';const Student = (props) => {const { dataList, title } = props;// 过滤数据const visionList = [{ value: 1048, name: 'Search Engine'},{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }];useEffect(() => {loadingChart();}, [dataList])const loadingChart = () => {// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('Student'));// 指定图表的配置项和数据var option = {tooltip: {trigger: 'item'},series: [{name: '学生统计',type: 'pie',radius: ['56%', '84%'],data: visionList,color: ['#52CCB8', '#61C2F2', '#36B580', '#619DF2', '#2E8AE5'],emphasis: { // 设置高亮时显示标签label: {show: true},scale: true, // 设置高亮时放大图形scaleSize: 20},label: { // 设置图形标签样式show: false, // 未高亮时不显示标签,否则高亮时显示的标签会与静态的标签重叠position: 'center',// 设置标签展示内容,其中{d}、{b}为echarts标签内容格式器formatter: '{d_style|{d}}{per_style|%}\n{b_style|{b}}',// 为标签内容指定样式,只能设置series-pie.label支持的样式rich: {d_style: {fontSize: 20},per_style: {fontSize: 20},b_style: {fontSize: 18}}}}]}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);if (visionList.length <= 0) {myChart.showLoading({text: '暂无数据',showSpinner: false,textColor: '#fff',maskColor: 'rgba(0, 0, 0, 0)',fontSize: '18px'})} else {myChart.hideLoading()}let currentIndex = -1; // 当前高亮图形在饼图数据中的下标let changePieInterval = setInterval(selectPie, 1000); // 设置自动切换高亮图形的定时器function highlightPie() { // 取消所有高亮并高亮当前图形for (var idx in option.series[0].data)// 遍历饼图数据,取消所有图形的高亮效果myChart.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: idx});// 高亮当前图形myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: currentIndex});}myChart.on('mouseover', (params) => { // 用户鼠标悬浮到某一图形时,停止自动切换并高亮鼠标悬浮的图形if (changePieInterval)clearInterval(changePieInterval);currentIndex = params.dataIndex;highlightPie();});myChart.on('mouseout', (params) => { // 用户鼠标移出时,重新开始自动切换if (changePieInterval)clearInterval(changePieInterval);changePieInterval = setInterval(selectPie, 1000);});function selectPie() { // 高亮效果切换到下一个图形var dataLen = option.series[0].data.length;currentIndex = (currentIndex + 1) % dataLen;highlightPie();}}return (<div id='Student' style={{ width: '77%', height: '250px', float: 'right', color: '#fff' }}></div>);
};export default Student;
相关文章:
react+ echarts 轮播饼图
react echarts 轮播饼图 图片示例 代码 import * as echarts from echarts; import { useEffect } from react; import styles from ./styles.scss;const Student (props) > {const { dataList, title } props;// 过滤数据const visionList [{ value: 1048, name: Se…...
政安晨:【深度学习神经网络基础】(三)—— 激活函数
目录 线性激活函数 阶跃激活函数 S型激活函数 双曲正切激活函数 修正线性单元 Softmax激活函数 偏置扮演什么角色? 政安晨的个人主页:政安晨 欢迎 👍点赞✍评论⭐收藏 收录专栏: 政安晨的机器学习笔记 希望政安晨的博客能够对您有所裨…...
使用tomcat里的API - servlet 写动态网页
一、创建一个新的Maven空项目 首次创建maven项目的时候,会自动从maven网站上下载一些依赖组件(这个过程需要保证网络稳定,否则后续打包一些操作会出现一些问题) ps:校园网可能会屏蔽一些网站,可能会导致maven的依赖…...
从0到1搭建文档库——sphinx + git + read the docs
sphinx git read the docs 目录 一、sphinx 1 sphinx的安装 2 本地构建文件框架 1)创建基本框架(生成index.rst ;conf.py) conf.py默认内容 index.rst默认内容 2)生成页面(Windows系统下…...
EasyExcel 校验后导入
引入pom <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.3.3</version></dependency>触发校验类 import com.baomidou.mybatisplus.extension.api.R; import lombok.experimental…...
【星计划★C语言】c语言初相识:探索编程之路
🌈个人主页:聆风吟_ 🔥系列专栏:星计划★C语言、Linux实践室 🔖少年有梦不应止于心动,更要付诸行动。 文章目录 📋前言一. ⛳️第一个c语言程序二. ⛳️数据类型2.1 🔔数据单位2.2 &…...
搜维尔科技:借助 ARVR 的力量缩小现代制造业的技能差距
借助ARVR的力量缩小现代制造业的技能差距 搜维尔科技:Senseglove案例-扩展机器人技术及其VR应用...
数据结构之栈和队列
1.前言 大家好久不见,这段时间由于忙去了。就没有即使维护我的博客,先给大家赔个不是。 我们还是规矩不乱,先赞后看~ 今天讲的内容是数据结构中非常重要的一个部分:栈和队列。它在今后的学习中也会再次出现(c&#…...
centos安装使用elasticsearch
1.首先可以在 Elasticsearch 官网 Download Elasticsearch | Elastic 下载安装包 2. 在指定的位置(我的是/opt/zhong/)解压安装包 tar -zxvf elasticsearch-7.12.1-linux-x86_64.tar.gz 3.启动es-这种方式启动会将日志全部打印在当前页面,一旦使用 ctrlc退出就会导…...
4.7学习总结
java学习 一.Stream流 (一.)概念: Stream将要处理的元素集合看作一种流,在流的过程中,借助Stream API对流中的元素进行操作,比如:筛选、排序、聚合等。Stream流是对集合(Collection)对象功能的增强&…...
自定义gitlog格式
git log命令非常强大而好用,在复杂系统的版本管理中扮演着重要的角色,但默认的git log命令显示出的东西实在太丑,不好好打扮一下根本没法见人,打扮好了用alias命令拍个照片,就正式出道了! 在使用git查看lo…...
Redission--分布式锁
Redission的锁的好处 Redission分布式锁的底层是setnx和lua脚本(保证原子性) 1.是可重入锁。 2.Redisson 锁支持自动续期功能,这可以帮助我们合理控制分布式锁的有效时长,当业务逻辑执行时间超出了锁的过期时间,锁会自动续期,避免…...
非关系型数据库(缓存数据库)redis的集群
目录 一.群集模式——Cluster 1.原理 2.作用 3.特点 4.工作机制 哈希槽 哈希槽的分配 哈希槽可按照集群主机数平均分配(默认分配) 根据主机的性能以及功能自定义分配 redis集群的分片 分片 如何找到给定key的分片 优势 二. 搭建Redis群集…...
MySQL:表的约束(上)
文章目录 空属性默认值列描述zerofill主键 本篇总结的是MySQL中关于表的约束部分的内容 空属性 在进行表的创建时,会有两个值,null和not null,而数据库默认的字段基本都是空,但是在实际的开发过程中要保证字段不能为空ÿ…...
树莓派5使用体验
原文地址:树莓派5使用体验 - Pleasure的博客 下面是正文内容: 前言 好久没有关于教程方面的博文了,由于最近打算入门嵌入式系统,所以就去购入了树莓派5开发板 树莓派5是2023年10月23日正式发售的,过去的时间不算太远吧…...
代码随想录算法训练营第42天| 背包问题、416. 分割等和子集
01 背包 题目描述:有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i],得到的价值是value[i] 。每件物品只能用一次,求解将哪些物品装入背包里物品价值总和最大。 二维dp数组01背包: 确定dp数组以及下标的含义 …...
Node.js安装及环境配置指南
Node.js安装及环境配置指南 一、Node.js的安装 安装Node.js之前,首先需要确保你的电脑已经安装了合适的编译器和开发环境。Node.js是一个开源的、跨平台的JavaScript运行环境,它使得JavaScript可以在服务器端运行。 下载Node.js安装包 访问Node.js的…...
【Java基础】面试题汇总
Java基础面试题1. JVM vs JDK vs JRE 2. 什么是字节码?采用字节码的好处是什么?3. 为什么说 Java 语言“编译与解释并存”?4. AOT 有什么优点?为什么不全部使用 AOT 呢?5. Java 和 C 的区别?6. Java 中的基本数据类型࿱…...
数据库事务的超级详细讲解,包括事务特性、事务隔离级别、MVCC(多版本并发控制)
数据库事务: 主要有事务特性,事务的隔离级别,MVCC。 事务特性: 事务(Transaction)是指作为单个逻辑工作单元执行的一系列操作,这些操作要么全部成功执行,要么全部不执行ÿ…...
鸿蒙Lottie动画-实现控制动画的播放、暂停、倍速播放、播放顺序
介绍 本示例展示了lottie对动画的操作功能。引入Lottie模块,实现控制动画的播放、暂停、倍速播放、播放顺序、播放到指定帧停止或从指定帧开始播放、侦听事件等功能,动画资源路径必须是json格式。 效果预览 使用说明: 进入页面默认开始201…...
C++面试100问与自动驾驶100问
C的学习和面试其实是非常的不友好的,首先C的学习内容非常的多,其次C的面试不单单面试C的知识点,还有它的“七大姑八大姨”(计算机网络、数据结构、算法、计算机组成原理、操作系统、编译、xxx的底层实现 and so on)。 …...
加速 Redis 操作:掌握管道技术提升性能与效率
Redis 管道技术是一种用于优化 Redis 命令执行效率的机制。在传统的 Redis 操作中,每次向 Redis 服务器发送一个命令,都需要等待命令执行完成并返回结果,这样会导致频繁的网络通信和服务器端的命令执行开销,降低系统的性能和吞吐量…...
深入浅出 -- 系统架构之分布式系统底层的一致性
在分布式领域里,一致性成为了炙手可热的名词,缓存、数据库、消息中间件、文件系统、业务系统……,各类分布式场景中都有它的身影,因此,想要更好的理解分布式系统,必须要理解“一致性”这个概念。 其实关于…...
idea Springboot 电影推荐系统LayUI框架开发协同过滤算法web结构java编程计算机网页
一、源码特点 springboot 电影推荐系统是一套完善的完整信息系统,结合mvc框架和LayUI框架完成本系统springboot dao bean 采用协同过滤算法进行推荐 ,对理解JSP java编程开发语言有帮助系统采用springboot框架(MVC模式开发)&…...
xss【2】
1.xss钓鱼 钓鱼攻击利用页面,fish.php黑客钓鱼获取到账号密码存储的位置 xss进行键盘记录 2.xss常规防范 3.xss验证payload XSS(跨站攻击)_details/open/ontoggle-CSDN博客...
时序分解 | Matlab实现GSWOA-VMD改进鲸鱼优化算法优化变分模态分解时间序列信号分解
时序分解 | Matlab实现GWO-CEEMDAN基于灰狼算法优化CEEMDAN时间序列信号分解 目录 时序分解 | Matlab实现GWO-CEEMDAN基于灰狼算法优化CEEMDAN时间序列信号分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现GSWOA-VMD改进鲸鱼优化算法优化变分模态分解时间序…...
css- 4
1.浮动 1. 浮动最初用于实现文字环绕效果 2. 现在,浮动是主流的布局方式之一 1.1元素浮动之后的特点 元素浮动之后,称为浮动元素,具有如下特点: 1. 浮动元素脱离文档流 2. 多个浮动的元素会水平排列,一行放不下自动换…...
22.括号生成
题目描述 数字 n 代表生成括号的对数,请你设计一个函数,用于能够生成所有可能的并且 有效的 括号组合。 示例 1: 输入:n 3 输出:[“((()))”,“(()())”,“(())()”,“()(())”,“()()()”] 示例 2: 输入…...
JAVA八股--redis
JAVA八股--redis 如何保证Redis和数据库数据一致性redisson实现的分布式锁的主从一致性Redis脑裂现象及解决方案介绍I/O多路复用模型undo log 和 redo log(没掌握MyISAM 和 InnoDB 有什么区别? 如何保证Redis和数据库数据一致性 关于异步通知中消息队列…...
[图像处理] MFC载入图片并绘制ROI矩形
上一篇: [图像处理] MFC载入图片并进行二值化处理和灰度处理及其效果显示 文章目录 前言完整代码重要代码效果 前言 上一篇实现了MFC通过Picture控件载入图片。 这一篇实现ROI功能的第一部分,在Picture控件中,通过鼠标拖拽画出一个矩形。 完…...
深圳做企业网站的公司/如何解决网站只收录首页的一些办法
厕所 在美国一般都叫rest room或bath room(男女厕均可)或分别叫做 men‘s room 或 ladies‘ room(powder room),不过在飞机上,则叫 lavatory,在军中又叫 latrine。至于 W.C.(…...
外贸建站wordpress/seo营销工具
信号与槽作为QT的核心机制在QT编程中有着广泛的应用,本文介绍了信号与槽的一些基本概念、元对象工具以及在实际使用过程中应注意的一些问题。QT是一个跨平台的C GUI应用构架,它提供了丰富的窗口部件集,具有面向对象、易于扩展、真正的组件编程…...
有手机网站怎样做微信小程序/自动收录网
具体现象是在图形界面输入用户名和密码之后,再次提示需要输入用户名和密码。 步骤一:按快捷键进入命令行界面。ctrlaltf1。 步骤二:清空文件 clear log cd /var/log sudo su > lastlog > wtmp > dpkg.log > kern.log > syslo…...
网站做数学题/网址如何被快速收录
一、快速排序原理快速排序是一种基于分治思想的排序算法。在快排中,我们的工作主要集中在划分而不是合并子问题。首先我们要选择一个中轴,把比中轴大的元素放在它的右边,比他小的放在它的左边。中轴的选择有很多种,其中最简单的就…...
扁平化的网站有哪些/长沙网站优化seo
以系统为中心,根据城市的发展情况,改变盈利模式。这是创业的战略模式。。。。 期初的盈利模式比较宽泛,之后比较单一,再后来就是单一为主,宽泛为辅。。。。 资金,市场,人员,这是创…...
网站资质证书/百度点击器找名风
常用排序算法 用python写一下几个常用的排序算法 选择排序 def select_sort(arr):length len(arr)for i in range(length - 1):big ifor j in range(i 1, length):if arr[j] < arr[big]:big jtemp arr[i]arr[i] arr[big]arr[big] tempreturn arr插入排序 def ins…...