效果图如下：
实现程序主代码如下：
initOption() {
let quantity = 0; // 总数
dataList.forEach((item) => {
quantity += item.y;
});
if (dataList.length<=2) {
dataList.forEach((item) => {
item.bfb = parseInt((item.y / quantity) * 100);
item.h = item.bfb * 1.5 >= 70 ? 50 : 30
});
}else{
dataList.forEach((item) => {
item.bfb = parseInt((item.y / quantity) * 100);
// item.h = item.bfb * 1.5 >= 70 ? 70 : item.bfb * 1.5
item.h = item.bfb * 1.5 >= 50 ? 50 : item.bfb * 1.5
// item.h = parseInt(0.86 * item.bfb); // 最高高度60，根据比例渲染高度
// console.log(this.dataList, "dataList----->>>");
});
}
// 修改3d饼图绘制过程
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 3D
if (!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 method
var ret = proceed.apply(this, [].slice.call(arguments, 1));
ret.zTop = (ret.zOut + 0.5) / 100;
return ret;
}
);
})(highcharts);
highcharts.chart(chart, {
chart: {
animation: false,
backgroundColor: "none",
type: "pie", //饼图
margin: [0, 0, 0, 0],
options3d: {
enabled: true, //使用3d功能
alpha: 58, //延y轴向内的倾斜角度
// beta: 0,
},
events: {
load: function () {
var each = highcharts.each,
points = this.series[0].points;
each(points, function (p, i) {
p.graphic.attr({
translateY: -p.shapeArgs.ran,
});
p.graphic.side1.attr({
translateY: -p.shapeArgs.ran,
});
p.graphic.side2.attr({
translateY: -p.shapeArgs.ran,
});
});
},
},
},
legend: {
enabled: false, // 关闭图例
align: "right", //水平方向位置
verticalAlign: "bottom", //垂直方向位置
layout: "vertical",
x: fontChart(-20),
y: fontChart(30),
symbolWidth: fontChart(10),
symbolHeight: fontChart(10),
symbolRadius: "50%", // 修改成圆
itemMarginBottom: fontChart(8),
useHTML: true,
//labelFormat: '{name} {y}',
labelFormatter: function () {
return (
// '<div style="width: .3125rem;display: inline-block">' +
this.name +
// ': </div><div style="color: #00d7da;display: inline-block">' +
this.y
// +"</div>"
);
},
itemStyle: {
color: "#f4f4f6",
fontSize: fontChart(12),
},
},
title: { //主标题
text: ''
},
// subtitle: {//二级标题
// text: "",
// },
plotOptions: {
pie: {
allowPointSelect: false, // 禁用点击
cursor: "pointer",
// depth: fontChart(50), //圆环的高度
showInLegend: true,
size: "50%", // 外圈直径大小
innerSize: 50, // 内圈直径大小
center: ["50%", "50%"],
colors: color,
dataLabels: {
useHTML: true,
enabled: true, //是否显示饼图的线形tip
inside:true,
crookDistance: '100%',
zIndex:999,
distance: 20,
borderColor: '#007acc',
align: "center",
position: "right",
padding: 0,
// format: "{point.name} : {point.y}",
formatter: function() {
if (this.percentage > 0)
return '<b>' + this.point.name + '</b>: ' + this.point.y; // 这里进行判断
},
color: "#ffffff",
x: 2,
style: {
fontSize: '8px',
},
},
},
},
credits: {
enabled: false, // 禁用版权信息
},
series: [
{
type: "pie",
name: "数量",
startAngle:170,
data: dataList,
center:["50%", "50%"]
},
],
});
}