前言
正常的legend的展示是从左到右的,鉴于需求的要求,需要从右往左展示。图片显示的数量,但是下面的代码中显示的百分比。
代码
function arrCount(arr) {
let count = 0
arr.forEach(item => {
count = count + item.value
})
return count
}
let typeChartMoney = self.$echarts.init(document.getElementById('typeChartMoney'));
typeChartMoney.setOption({
title: {
show: false
},
legend: function () {
let serie = [];
// 这是每列五个来计算的,大于5才需要分列
if (collectHTLXMoney.length > 5) {
collectHTLXMoney.map((item, index) => {
let dataList;
let flag = false;
let r = 20 * parseInt(index / 5)
if ((index + 1) % 5 == 0) {
flag = true;
dataList = collectHTLXMoney.slice((index - 5 + 1), (index + 1))
} else if ((index + 1) == collectHTLXMoney.length) {
flag = true;
dataList = collectHTLXMoney.slice(parseInt(collectHTLXMoney.length / 5) * 5)
}
let obj = {
orient: 'vertical',
right: r + '%',
align: 'left',
icon: 'circle',
itemGap: 10,
itemHeight: 12,
textStyle: {
color: '#76B7E9',
fontSize: 16,
lineHeight: 20,
},
formatter(name) {
// 显示名字和百分比
// let total = arrCount(collectDeptNum)
// const val = collectDeptNum.filter(item => {
// return item.name === name
// })
// return name + '\n' + ((val[0].value / total).toFixed(1)) * 100 + '%'
const val = collectHTLXMoney.filter(item => {
return item.name === name
})
return name + '\n' + val[0].value
},
data: dataList
}
if (flag) {
serie.push(obj);
}
});
}
return serie;
}(),
tooltip: {
trigger: 'item',
formatter: '{b} <br/>{c} ({d}%)'
},
color: self.colors,
series: {
type: 'pie',
right: '45%',
label: {
formatter: '{b}\n{d}%',
fontSize: 18,
},
data: collectHTLXMoney
}
});