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;}}