formatter in legend: used to format the legend text, supports two forms of string template and callback function.
Documentation - Apache ECharts
The acquaintance variables of the string template are used (different charts have corresponding variables):
Documentation - Apache ECharts
For specific details, you can click the ^^^ link to view:
The following are examples of our projects:
//核心代码
legend: {
formatter: function (name) {
// 想要实现什么样的效果,可以根据你们的需求来进行处理返回
if (name.indexOf('星') > -1) {//判断是否是星级占比
let p = (tarValue / total * 100).toFixed(2);//计算百分比
return name + '\r\r' + p + '%';//返回文本
} else {
let p = (tarValue / total * 100).toFixed(2);//计算百分比
return name + '\r\r\r' + tarValue + '个\r\r|\r\r' + p + '%';//返回文本
}
}
}
Want to achieve the nesting effect of two charts, as shown in the figure above:
You just need to create a <div id ="xjzbChart"></div>
Then get xjzbChart = echarts.init(document.getElementById('xjzbChart'));
Create two chart objects in the series array, adjust the position through the center property and it will be OK.
<div id="xjzbChart"></div>
onMounted(()=>{
xjzbChart = echarts.init(document.getElementById('xjzbChart'));
drawXjzbChart();
window.addEventListener('resize', () => {
xjzbChart.resize();
})
})
function drawXjzbChart() {
let option = {
tooltip: {
trigger: 'item'
},
legend: {
icon: 'circle',
itemHeight: 10,
itemWidth: 10,
bottom: 20,
itemGap: 20,
left: 'center',
textStyle: {
color:'#ffffff',
fontSize: 14
},
formatter: function (name) {
// 获取星级占比数据
let data1 = option.series[0].data;
// 获取机构分布数据
let data2 = option.series[1].data;
let total = 0;
let tarValue = 0;
let allData = data1.concat(data2);// 合并data1和data2
for (let i = 0; i < allData.length; i++) {
/* series中的 星级占比: data的value总和 与 机构分布: data的value总和 一样所以我们只需要
取前前五个(星级占比的value值进行相加计算总和来计算 星级占比和机构分布的百分比) */
if (i < 5) {
total += allData[i].value;
}
// 把 allData中的每个name 与 formatter中的name进行比对,并赋上对应的值
if (allData[i].name == name) {
tarValue = allData[i].value;
}
}
if (name.indexOf('星') > -1) { // 对 formatter中的name进行检索,符合的进行操作
// 例: (548/2860*100)保留两位小数 ==> tarValue=548 total=2860
let p = (tarValue / total * 100).toFixed(2);
return name + '\r\r' + p + '%';
} else {
// 检索出不带星字的就是机构的数据,然后进行操作
let p = (tarValue / total * 100).toFixed(2);
return name + '\r\r\r' + tarValue + '个\r\r|\r\r' + p + '%';
}
}
},
series: [
{
name: '星级占比',
type: 'pie',
selectedMode: 'single',
center: ['50%', '35%'],
radius: [0, '20%'],
label: {
fontSize: 12,
color: '#ffffff',
formatter: '{b}\n{d}%'
},
labelLine: {
show: true,
length: 5
},
data: [
{ value: 548, name: '一星' },
{ value: 775, name: '二星' },
{ value: 679, name: '三星'},
{ value: 479, name: '四星'},
{ value: 379, name: '五星'}
]
},
{
name: '机构分布',
type: 'pie',
center: ['50%', '35%'],
radius: ['50%', '65%'],
labelLine: {
length: 20
},
label: {
color: '#ffffff',
fontSize: 14,
formatter: '{b}\n{c}'
},
data: [
{ value: 348, name: '建安区' },
{ value: 435, name: '魏都区' },
{ value: 710, name: '长葛市' },
{ value: 551, name: '禹州市' },
{ value: 634, name: '襄城县' },
{ value: 182, name: '鄢陵县' }
]
}
]
}
xjzbChart.setOption(option);
}