echarts饼状图自定义label显示
DrawEcharts() {
var myChart = this.$echarts.init(document.getElementById('echarts'))
var option = {
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
left: 'left',
top: '70%',
},
series: [
{
radius: ['40%', '80%'],
center: ['52%', '48%'],
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
name: '接听情况',
type: 'pie',
label: {
normal: {
// formatter: `123`,
formatter: '{haha|{b}}{per|{c}} {num|个} ',
// position: 'inner',
rich: {
c: {
color: '#000',
lineHeight: 22,
fontWeight: 700,
// align: 'center'
},
abg: {
backgroundColor: '#333',
width: '100%',
align: 'right',
height: 22,
borderRadius: [4, 4, 0, 0],
},
num: {
color: '#000',
fontSize: 30,
fontWeight: 700,
},
per: {
color: 'red',
// backgroundColor: '#334455',
fontSize: 30,
padding: [2, 4],
fontWeight: 700,
borderRadius: 2,
},
},
},
},
data: [
{
value: 385,
name: '本省接听量',
itemStyle: {
color: '#0264ac',
},
label: {
color: '#000',
},
},
{
value: 81,
name: '外省帮接听量',
itemStyle: {
color: '#ffc000',
},
label: {
color: '#000',
},
},
{
value: 4,
name: '本省帮外省接听量',
itemStyle: {
color: '#92d050',
},
label: {
color: '#000',
},
},
{
value: 83,
name: '呼损',
itemStyle: {
color: '#8a56b1',
},
label: {
color: '#000',
},
},
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
}
myChart.setOption(option)
},
效果图
