<div ref="pie" v-resize="resize" style="height: 15vh" class="pie"></div>
data() {
return {
pieChart: null,
}
}
init(){
let _this = this
this.$nextTick(() => {
const legendData = this.typeData
const target = new Map()
this.typeData.forEach((item) => {
target.set(item.name, item.value)
})
for (let index = 0; index < this.typeData.length; index++) {
const element = this.typeData[index]
this.total += element.value
}
_this.pieChart = this.$echarts.init(this.$refs['pie'])
const option = {
tooltip: {
trigger: 'item',
position: 'right'
},
legend: {
orient: 'vertical',
selectedMode: true,
icon: 'circle',
x: _this.tab ? '45%' : '65%',
y: _this.tab ? '1%' : '15%',
selected: {
X: true,
Y: true
},
itemWidth: 8,
itemHeight: 8,
formatter: function (name) {
if (legendData.length) {
let inum = target.get(name)
return `${name} ${inum}`
}
},
textStyle: {
fontSize: 12
}
},
series: [
{
type: 'pie',
radius: ['55%', '70%'],
center: ['25%', '42%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
textStyle: {
fontFamily: 'blackbody'
}
},
emphasis: {
label: {
show: false,
fontSize: 12,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: this.typeData
}
]
}
_this.pieChart.off('legendselectchanged')
_this.pieChart.on('legendselectchanged', function (params) {
_this.pieChart.setOption({
legend: { selected: { [params.name]: true } }
})
})
option && this.pieChart.setOption(option)
})
}