图例多行显示效果,期望图例色块与文字顶部对齐
起初效果是图1
实际效果如下对齐
改进代码
datas = [
{name: '18-45岁', value: 966, rate: 48.25},
{name: '46-59岁', value:945, rate: 48.15},
{name: '其他', value: 72, rate:3.6},
]
legend: {
orient: 'vertical', //竖向展示
left: 'left',
height: '100%', //图例容器的高度,超过会换行展示
top: 'center',
itemWidth: 16, //图标宽设置
itemHeight: 14, //图标长设置
formatter: function (name) {// 图例自定义展示设置
let target, rate, other = '', arr
if (name === '其他') {
other = '18岁以下及60岁以上'
for (let i = 0; i < datas.length; i++) {
if (datas[i].name === name) {
target = datas[i].value
rate = datas[i].rate
}
}
arr = '{name|' + name + ': ' + target + '人}' +'\n'+ '{rate|' + '占比:' + rate + '%}' +'\n'+ '{other|' + other + '}'
} else {
for (let i = 0; i < datas.length; i++) {
if (datas[i].name === name) {
target = datas[i].value
rate = datas[i].rate
}
}
arr = '{name|' + name + ': ' + target + '人}' +'\n'+ '{rate|' + '占比:' + rate + '%}'
}
let tmp = arr.split('\n');
let res = "" + arr;
for (let i in tmp) {
res = res.replace(tmp[i], "");
}
return res+arr;
},
textStyle: { // 设置样式
padding: [2, 0, 0, 0],
rich: {
name: {
fontSize: 14,
width: 75,
color: '#ffffff',
fontWeight: 'bold',
},
rate: {
fontSize: 14,
width: 75,
color: '#bcbcbc'
},
other: {
fontSize: 12,
width: 75,
color: '#bcbcbc'
}
}
}
},
特殊备注:
文字的位置还可以做特殊的偏移配置padding