设置label的formatter。
label: {
show: true,
formatter: '{b} : {d}%'
},
已封装好,可直接复制使用。
<template>
<!-- 饼状图 -->
<div ref="echart" :class="className" :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts';
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '500px'
},
height: {
type: String,
default: '300px'
},
chartData: {
type: Array,
required: true
},
},
data() {
return {
chart: null,
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.echart);
this.setOptions(this.chartData)
},
setOptions(data) {
this.chart.setOption({
tooltip: {
trigger: 'item',
formatter: '{b} : {d}%'
},
legend: {
orient: 'vertical',
left: 'right',
top: 'bottom'
},
series: [{
type: 'pie',
radius: '50%',
data: data,
itemStyle: {
normal: {
label: {
show: true,
formatter: '{b} : {d}%'
},
}
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
}
}]
})
}
}
}
</script>