window.addEventListener('resize', this.handleResize);
beforeUnmount() { // 在 Vue 2 中使用 beforeDestroy
window.removeEventListener('resize', this.handleResize);
methods: {
handleResize() {
this.drawEcharts(); // 重新绘制图表
drawEcharts() {
var that = this;
// 修改3d饼图绘制过程
const each = Highcharts.each
const round = Math.round
const cos = Math.cos
const sin = Math.sin
const 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
const series = this
const chart = series.chart
const options = chart.options
const seriesOptions = series.options
const depth = seriesOptions.depth || 0
const options3d = options.chart.options3d
const alpha = options3d.alpha
const beta = options3d.beta
var z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth
z += depth / 2
if (seriesOptions.grouping !== false) {
z = 0
each(series.data, function (point) {
const shapeArgs = point.shapeArgs
var 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
const ret = proceed.apply(this, [].slice.call(arguments, 1))
ret.zTop = (ret.zOut + 0.5) / 100
return ret
}(Highcharts))
// 生成不同高度的3d饼图
Highcharts.chart(that.$refs.echarts, {
tooltip: {
enabled: false
chart: {
type: 'pie',
animation: false,
backgroundColor: 'rgba(0,0,0,0)',
events: {
load: function () {
const each2 = Highcharts.each
const points2 = this.series[0].points
each2(points2, 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
options3d: {
enabled: true,
alpha: 65
title: {
show: 'false',
text: null
subtitle: {
text: null
credits: {
enabled: false
legend: { // 【图例】位置样式
backgroundColor: 'rgba(0,0,0,0)',
shadow: false,
layout: 'vertical',
align: 'right', // 水平方向位置
verticalAlign: 'top', // 垂直方向位置
x: 0, // 距离x轴的距离
y: 100, // 距离Y轴的距离
symbolPadding: 10,
symbolHeight: 14,
itemStyle: {
lineHeight: '24px',
fontSize: '16px',
color: '#fff'
labelFormatter: function () {
* 格式化函数可用的变量：this， 可以用 console.log(this) 来查看包含的详细信息
* this 代表当前数据列对象，所以默认的实现是 return this.name
return this.name + this.h + '%'
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
animation: false,
center: ['50%', '50%'],
depth: 20,
size: '80%',
innerSize: 80,
lineWidth: 1,
borderWidth: 1,
states: {
hover: {
halo: {
size: 1 // 移除 hover 状态下的光晕效果
// brightness: 1 // hover 状态下亮度增加，相当于透明度减少
inactive: {
opacity: 0.5 // 非激活状态下的透明度
tooltip: {
enabled: false // 禁用默认 tooltip
dataLabels: {
enabled: false,
padding: 0,
distance: 10,
connectorColor: 'silver',
connectorPadding: 1, // 控制引导线的长度
useHTML: true, // 允许使用HTML标签
formatter: function () {
// 使用HTML标签自定义样式
var nameStyle = '
' + this.point.name + '';
var percentageStyle = '
' + Highcharts.numberFormat(this.percentage, 0) + '%';
return nameStyle + ': ' + percentageStyle; // 将样式组合起来
// 显示图例
showInLegend: false
series: [{
type: 'pie',
name: '占比',
// h 是高度 y是占的圆环长度
colorByPoint: true,
colors: [
{ // 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
linearGradient: {
x1: 0,
y1: 1,
x2: 1,
y2: 0
stops: [
[0, '#19596d'],
[1, '#2ea1b2']
}, { // 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
linearGradient: {
x1: 0,
y1: 1,
x2: 1,
y2: 0
stops: [
[0, '#ee7529'],
[1, '#f5a86c']
}, { // 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
linearGradient: {
x1: 0,
y1: 1,
x2: 1,
y2: 0
stops: [
[0, '#f5c055'],
[1, '#967b3d']
}, { // 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
linearGradient: {
x1: 0,
y1: 1,
x2: 1,
y2: 0
stops: [
[0, '#2d7bb5'],
[1, '#1a5784']
}, { // 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
linearGradient: {
x1: 0,
y1: 1,
x2: 1,
y2: 0
stops: [
[0, 'rgba(184, 234, 255, 1.00)'],
[1, 'rgba(138, 223, 255, 1.00)']
data: [
{name: 'A类', y: 28, h: 60},
{name: 'B类', y: 20, h: 20},
{name: 'C类', y: 10, h: 32},
{name: 'D类', y: 6, h: 45},
{name: 'E类', y: 6, h: 45}
