Highcharts 实现3D饼图 tooltip轮播

在这里插入图片描述
实现3D饼图,并且轮播显示tooltip
自定义toottip样式

import Highcharts from 'highcharts';
import highcharts from 'highcharts';
import highcharts3d from 'highcharts/highcharts-3d';highcharts3d(Highcharts);
highcharts3d(highcharts);
import { useEffect, useState } from 'react';/*** 不同高度的3D圆环图* */
export function getPie(id) {let colorArr = ['#f04f45', '#66f2ff', '#7fa9ff', '#d26657', '#F4414A'];Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color,i) {return {radialGradient: {cx: 0.5,cy: 0.3,r: 0.7,},stops: [[0, colorArr[i]],[1,Highcharts.Color(colorArr[i]).brighten(-0.2).get('rgb'),],],};});var each = highcharts.each,round = Math.round,cos = Math.cos,sin = Math.sin,deg2rad = Math.deg2rad;highcharts.wrap(highcharts.seriesTypes.pie.prototype, 'translate', function(proceed) {proceed.apply(this, [].slice.call(arguments, 1));// Do not do this if the chart is not 3Dif (!this.chart.is3d()) {return;}var series = this,chart = series.chart,options = chart.options,seriesOptions = series.options,depth = seriesOptions.depth || 0,options3d = options.chart.options3d,alpha = options3d.alpha,beta = options3d.beta,z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;z += depth / 2;if (seriesOptions.grouping !== false) {z = 0;}each(series.data, function(point) {var shapeArgs = point.shapeArgs,angle;point.shapeType = 'arc3d';var ran = point.options.h;shapeArgs.z = z;shapeArgs.depth = depth * 0.75 + ran;shapeArgs.alpha = alpha;shapeArgs.beta = beta;shapeArgs.center = series.center;shapeArgs.ran = ran;angle = (shapeArgs.end + shapeArgs.start) / 2;point.slicedTranslation = {translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),};});});(function(H) {H.wrap(highcharts.SVGRenderer.prototype, 'arc3dPath', function(proceed) {// Run original proceed methodvar ret = proceed.apply(this, [].slice.call(arguments, 1));ret.zTop = (ret.zOut + 0.5) / 100;return ret;});})(highcharts);// 生成不同高度的3d饼图var chart = highcharts.chart(id, {chart: {type: 'pie',animation: false,backgroundColor: 'rgba(0, 0, 0, 0)', // 不显示背景色events: {load: function() {console.log('ecah  hight');var each = highcharts.each,points = this.series[0].points;each(points, function(p) {p.graphic.attr({translateY: -p.shapeArgs.ran,});p.graphic.side1.attr({translateY: -p.shapeArgs.ran,});p.graphic.side2.attr({translateY: -p.shapeArgs.ran,});});// 轮播显示提示框var chart = this;var points = chart.series[0].points;var len = points.length;var i = 0;var timer = null;timer && clearInterval(timer);timer = setInterval(function() {autoTooltip(points[i]);i++;if (i === len) {i = 0;}}, 3000);},},options3d: {enabled: true,alpha: 75,beta: 0,},},title: '',legend: {floating: true,align: 'center',verticalAlign: 'top',symbolHeight: 9,symbolWidth: 9,itemStyle: {fontWeight: 'normal',},useHTML: true,labelFormatter: function() {return ('<span style="color: #fff;margin-left: 10px; font-size:13px">' +this.name +'</span>' +'<span style="color: ' +colorArr[this.index] +';">');},},tooltip: {style: {//提示框内容样式color: '#ECF5FE',fontSize: '14px',},useHTML: true,backgroundColor: 'rgba(255, 255, 255, 0.8)',borderColor: 'rgba(0, 0, 0, 0)',borderRadius: 0,borderWidth: 0,shadow: false,formatter: function() {var point = this.point;return ('<div class="custom-tooltip">' +`<i style='background: ${point.color.stops[0]};'></i>` +point.name +' <span>' +point.y +'</span>' +'<span>' +point.percentage.toFixed(0) +'%</span>' +'</div>');},},plotOptions: {pie: {allowPointSelect: true, //每个扇块能否选中cursor: 'pointer', //鼠标指针center: ['50%', '50%'],showInLegend: true,size: '130%',innerSize: 0,depth: 35, //饼图的厚度dataLabels: {enabled: false, //是否显示饼图的线形tipformatter: function() {let name = this.point.name;let value = this.y;return name + value + '%';},},},},credits: {enabled: false,},series: [{type: 'pie',data: [{name: '紧急告警',y: 10,h: 10,},{name: '重要告警',y: 10,h: 10,},{name: '普通告警 ',y: 15,h: 15,},{name: '提示告警',y: 30,h: 25,},],},],});function autoTooltip(point) {chart.tooltip && chart.tooltip.refresh(point);}
}export default function Pie3d() {useEffect(() => {getPie('pie3d');window.addEventListener('resize', () => {getPie('pie3d');});}, []);return <div id="pie3d" className="waring-pie" style={{ height: '100%' }} />;
}
.custom-tooltip {padding: 10px;color: #ecf5fe;background-size: cover;border-radius: 5px;/* 其他需要的样式 */background: url('~@/assets/img/busiMonitorSys/pie-hover.png') left center/100% 100%no-repeat;i {display: inline-block;width: 9px;height: 9px;border-radius: 50%;margin-right: 6px;}span {color: #23fffc;font-weight: 600;margin-left: 12px;}}

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

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

相关文章

开发服务器webpack-dev-server

开发服务器 在开发阶段&#xff0c;目前遇到的问题是打包、运行、调试过程过于繁琐&#xff0c;回顾一下我们的操作流程&#xff1a; 编写代码控制台运行命令完成打包打开页面查看效果继续编写代码&#xff0c;回到步骤2 并且&#xff0c;我们往往希望把最终生成的代码和页面…

2024 VMware VCP一条龙通关-送题库

VMware VCP-DCV 2024&#xff08;2V0-21.23&#xff09;认证考试&#xff0c;2024年可高分通过。 1.5. An administrator has a host profile named Standard-Config. The administrator wants to change the other host profiles to use only the storage configuration setti…

MySQL操作注意事项

文章目录 一、基本说明二、安装1、更新apt-get2、安装MySQL3、确认安装 三、连接MySQL进入模拟器四、配置MySQL&#xff08;可选&#xff09;五、设置root用户密码六、查看所有用户属性七、创建新用户用户授权授予用户user所有权限授予用户user建表权限 八、查看所有数据库九、…

前端开发优化之路

前端开发中的性能优化内容广泛&#xff0c;旨在提升网页的加载速度、交互流畅度和用户体验。以下是一些关键的前端性能优化措施&#xff1a; 一、页面加载性能优化 减少HTTP请求&#xff1a; 合并CSS和JavaScript文件。使用雪碧图&#xff08;CSS Sprites&#xff09;合并小图…

自定义付费报名表单系统源码 带完整的安装代码包以及安装代码包搭建部署教程

在当今数字化时代&#xff0c;各种在线服务需求日益增长&#xff0c;其中&#xff0c;自定义付费报名表单系统成为了许多机构、组织和企业不可或缺的一部分。为了满足这一市场需求&#xff0c;小编给大家分享一款功能强大、易于部署的自定义付费报名表单系统源码。本文将为您详…

Python嵌套绘图并为条形图添加自定义标注

论文绘图时经常需要多图嵌套&#xff0c;正好最近绘图用到了&#xff0c;记录一下使用Python实现多图嵌套的过程。 首先&#xff0c;实现 Seaborn 分别绘制折线图和柱状图。 绘制折线图import seaborn as snsimport matplotlib.pyplot as pltimport warningswarnings.filterw…

STM32CubeMX学习笔记30---FreeRTOS内存管理

一、简介 1 基本概念 FreeRTOS 操作系统将内核与内存管理分开实现&#xff0c;操作系统内核仅规定了必要的内存管理函数原型&#xff0c;而不关心这些内存管理函数是如何实现的&#xff0c;所以在 FreeRTOS 中提供了多种内存分配算法&#xff08;分配策略&#xff09;&#xf…

《二十二》Qt 音频编程实战---做一个音频播放器

1.UI界面制作 作为一个音乐播放器&#xff0c;最基础的肯定就是播放、暂停、上一首以及下一首&#xff0c;为了使这个界面好看一点&#xff0c;还加入了音量控制、进度条、歌曲列表等内容&#xff0c;至于这种配色和效果好不好看&#xff0c;我也不知道&#xff0c;个人审美一如…

智启未来:富唯智能AI-ICDP引领的可重构柔性装配产线

在全球制造业竞争日益激烈的今天&#xff0c;如何快速响应市场变化、提高生产效率、降低生产成本&#xff0c;成为了企业面临的重要挑战。随着产品个性化时代的到来&#xff0c;装配产品频繁变换&#xff0c;多品种小批量的生产模式逐渐成为主流。在这一背景下&#xff0c;富唯…

Coredns搭建DNS服务

CoreDNS 是一个灵活、可扩展的 DNS 服务器&#xff0c;常用于 Kubernetes 环境中&#xff0c;但也可以在其他场合单独部署。以下是在 Ubuntu 系统上部署 CoreDNS 的基本步骤&#xff1a; 步骤 1: 安装 CoreDNS Ubuntu 官方仓库可能不包含最新版本的 CoreDNS&#xff0c;所以我…

c#---枚举与结构体

一、枚举 枚举是一组命名整型常量。 枚举类型是使用 enum 关键字声明的。 C# 枚举是值类型。 这里假如我们要做个切水果的游戏&#xff1a; //1.定义水果类型 public enum FruitType {Apple,Lemon,Watermelon,Banana,Cherry,COUNT//水果总数 }// 2.随机刷新水果 public stat…

Linux 系统启动时设置一个全局环境变量

在 Linux 系统中&#xff0c;如果你想要在启动时设置一个全局环境变量&#xff0c;你可以将其写入某些特定的启动文件中。这些文件在用户登录时被读取&#xff0c;从而设定环境变量。以下是一些方法&#xff1a; 方法 1: /etc/environment 在 /etc/environment 中设置的变量对…

【QT教程】QT6 Debug技巧 QT调试

QT6 Debug技巧 使用AI技术辅助生成 QT界面美化视频课程 QT性能优化视频课程 QT原理与源码分析视频课程 QT QML C扩展开发视频课程 免费QT视频课程 您可以看免费1000个QT技术视频 免费QT视频课程 QT统计图和QT数据可视化视频免费看 免费QT视频课程 QT性能优化视频免费看 免费Q…

python 前台页面和oracle数据库联动案例-用户注册

今天是python 入门day3&#xff0c;案例实现界面如图&#xff0c;比较简单&#xff0c; 一个简单的用户注册页面&#xff0c;并且可以与Oracle数据库进行交互。 界面如图&#xff1a; 实现这个简单demo的过程中&#xff0c;遇到很多错误&#xff0c; 1、提交过程中提示主键不…

照片文件夹惊变白板?揭秘背后的原因及恢复秘籍

我们生活在一个数字化时代&#xff0c;照片已经成为记录生活的重要方式。然而&#xff0c;当你兴冲冲地打开保存珍贵记忆的文件夹时&#xff0c;却发现里面的照片全都变成了白板&#xff0c;这种心情无异于晴天霹雳。那么&#xff0c;这究竟是怎么回事呢&#xff1f; 照片文件夹…

【记录】常见的前端设计系统(Design System)

解释一下设计系统的定义&#xff0c;以及在国内&#xff0c;都有那些优秀的设计系统可以学习&#xff0c;希望可以帮到大家。 什么是设计系统&#xff08;Design System)&#xff1f; 设计系统&#xff08;Design System&#xff09;是一套综合性的指导原则、组件和规则&…

react router v6总结

一、使用createBrowserRouter()创建路由&#xff1a; 1、src/router/index.js&#xff1a; import { createBrowserRouter } from "react-router-dom"; import ErrorPage from "/pages/404/";const router createBrowserRouter([{path: "/",e…

Mysql8.0.30一次表锁问题的解决

起因 给material_config_field_data表的字段建立全文索引的时&#xff0c;发现该表卡死&#xff0c;然后无法对该表进行任何操作。 查找问题 执行sql #这个命令会显示InnoDB存储引擎的详细状态信息&#xff0c;包括锁等待和锁争用的信息 SHOW ENGINE INNODB STATUS结果 复制S…

stable diffusion教程

Stable Diffusion 是一种流行的图像生成模型&#xff0c;它可以根据文本提示生成高质量的图片。如果你想了解如何使用 Stable Diffusion&#xff0c;这里有一些基本的步骤和资源&#xff0c;可以帮助你开始使用&#xff1a; ### 1. 安装 Stable Diffusion 首先&#xff0c;你需…

语言基础 /CC++ 可变参函数设计与实践,变参函数的实现、使用、替代方法

文章目录 概述适用于做可变参数的数据类型格式化字符串输出用int做变长参数类型用结构体指针做变长参数类型用double做变长参数类型用结构体直接做变长参数类型 变参函数与宏定义符号 ... 不能透传符号 ... 不接受ap做参数_VA_ARGS_ 代表可变参数 回调可变参数函数取代变参函数…