首先半径过小的问题是通过我们给他加一个数值,然后图标展示的是showData,但是我们的label和tooltip都要再减去加上的这个值;
然后是再视觉引导线上方和下方展示的问题:
首先延长labelLine中length2的长度,然后通过distanceToLabelLine设置文字和视觉引导线的间距,因为这里的只使用一个/n的话有一点紧密,所以我这里使用两个/n
//初始化饼图
initPie() {
let chartDom = this.$refs.pie;
let myChart = echarts.init(chartDom);
let option;
let showData =[]
let sum = 0, max = 0;
this.pieData.forEach(item => {
sum += item.value
if(item.value >= max) max = item.value
})
// 放大规则
let number = Math.round(max * 0.4)
showData = this.pieData.map(item => {
return {
value: number + item.value,
name: item.name
}
})
option = {
title: {
text: '开度值(%)',
left: 'left',
textStyle: {
color: '#ffffff',
fontSize: 15
}
},
tooltip: {
trigger: 'item',
formatter: function (param){
return param.name +': '+ (param.value - number) + '%'
}
},
series: [
{
type: 'pie',
minAngle: 10, // 设置最小角度,确保数据小的扇区可见
roseType: 'radius',
radius: ['0%', '80%'],
data: showData,
label: {
show: true,
position:'outside',
verticalAlign:'middle',
color: '#f6f1f1',
fontSize: 15,
distanceToLabelLine:-70,//实现上方和下方显示
formatter: function (params) {
return ( params.value- number + '% ' + params.name + '').split(" ").join('\n\n'); // 在原来的值上添加 %
},
},
labelLine:{
minTurnAngle:90,
maxSurfaceAngle:120,
length:30,
length2:80,
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX:
0,
shadowColor:
'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
option && myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
// 随外层div的大小变化自适应
const _this = this
let erd = elementResizeDetectorMaker();
erd.listenTo(this.$refs.pieParent, () => {
_this.$nextTick(() => {
myChart.resize();
})
})
},