highcharts3d饼状图渲染时正常情况下渲染出来应该是类似下面的情况,但是在实际开发中,如果和其他类型的3d饼状图在一块开发时,会出现饼状图没有高度的情况,类似图2的效果。
图1:
图2:
解决办法
我们在设置饼状图数据的时候,可以给一个h值这个h值就是饼状图的高度了。
list2: function () {
var list = []
this.list.forEach((type) => {
// 饼状图的值 以及饼状图的高度
list.push({name: type.name, y: type.value, h: 6})
});
return list;
},
drawEcharts() {
var that = this
let color1 = this.colorList;
let color2 = this.colorList;
Highcharts.getOptions().colors = Highcharts.map(
Highcharts.getOptions().colors,
function (color, index) {
return {
radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
stops: [
[0, color2[index]],
[1, color1[index]],
],
};
}
);
var chart = Highcharts.chart(that.$refs.echarts, {
title: [],
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 60,
innerSize: 10,
beta: 0,
depth: 10,
}
},
tooltip: {
pointFormat: '{series.name}: {point.y}人<br><b>{point.percentage:.1f}%</b>'
},
credits: {
enabled: false
},
labels: {
style: {
color: 'red'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 10,
size: '100%',
innerSize: '60%',
center: ['50%', '50%'],
dataLabels: {
useHTML: true,
crop: true,
enabled: false,
connectorWidth: 1,
position: 'center',
distance: 0,
x: -15,
connectorShape: 'straight',
borderWidth: 0,
format: '<div class="dataLabels"><b>{point.name}</b>: {point.percentage:.1f} %</div>',
style: {
color: 'rgba(26, 178, 255, 1)'
}
},
}
},
series: [{
type: 'pie',
name: '事件中心',
data: this.list2
}]
});
},