legend中的formatter: 用来格式化图例文本,支持字符串模板和回调函数两种形式.
Documentation - Apache ECharts
字符串模板的相识变量使用(不同的图表对应都有对应的变量):
Documentation - Apache ECharts
具体详细使用可以点^^^链接查看:
以下是我司的项目实例:
//核心代码
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 + '%';//返回文本
}
}
}想要实现两个图表的嵌套效果,如上图所示:
你只需要创建一个 <div id="xjzbChart"></div>
然后 获取 xjzbChart = echarts.init(document.getElementById('xjzbChart'));文章来源：https://www.toymoban.com/news/detail-635539.html
在 series数组里面创建两个图表对象,通过center 属性调整位置就OK了.文章来源地址https://www.toymoban.com/news/detail-635539.html
<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);
}
到了这里，关于ECharts中: legend图例中的格式化属性(formatter)以及嵌套图表的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
