echarts 三环圆环_echarts环形饼图中间显示总数

function setEchartsPie(id, data) {

let $el = document.getElementById(id);

let myChart = this.echarts.init($el, '', {

width: 450,

height: 300,

});

let dataName = [];

let total = 0;

data.forEach((res) => {

dataName.push(res.name);

total += parseFloat(res.value) * 10000;

});

total = total / 10000;

let option = {

title: {

zlevel: 0,

text: [

'{value|￥' + total + '}',

'{name|总金额}',

].join('\n'),

rich: {

value: {

color: '#303133',

fontSize: 40,

fontWeight: 'bold',

lineHeight: 40,

},

name: {

color: '#909399',

lineHeight: 20

},

},

top: 'center',

left: '145',

textAlign: 'center',

textStyle: {

rich: {

value: {

color: '#303133',

fontSize: 40,

fontWeight: 'bold',

lineHeight: 40,

},

name: {

color: '#909399',

lineHeight: 20

},

},

},

},

tooltip: { // 悬停指示

trigger: 'item',

formatter: "{b}: {c} ({d}%)"

},

legend: {

orient: 'vertical',

x: 'right',

data: dataName,

itemGap: 30,

top: 'middle',

align: 'left',

icon: 'circle',

formatter: function (name) {

return name;

}

},

series: [

{

name: '访问来源',

type: 'pie',

radius: ['80%', '84%'],

center: [150, '50%'],

stillShowZeroSum: false,

avoidLabelOverlap: false,

zlevel: 1,

label: {

normal: {

padding: [30, 30, 30, 30],

backgroundColor: '#fff',

show: false,

position: 'center',

formatter: [

'{value|￥{c}}',

'{name|{b}}'

].join('\n'),

rich: {

value: {

color: '#303133',

fontSize: 40,

fontWeight: 'bold',

lineHeight: 40,

},

name: {

color: '#909399',

lineHeight: 20

},

},

},

emphasis: {

show: true,

textStyle: {

fontSize: '16',

fontWeight: 'bold'

}

}

},

data: data

}

],

color: ['#410ADF','#F42850','#F6A93B','#7ED321','#282828']

};

myChart.setOption(option);

}

setEchartsPie('echart', [

{ value: 300, name: '课程报名' },

{ value: 350, name: '服装收费' },

{ value: 250, name: '物料收费' },

{ value: 100, name: '其它收费' },

]);