先上图

小tips: (让 legend 左右居中显示,之前我还各种设置,后来发现不用设置,默认居中显示...)
下面是我的配置:
legend: {
orient: 'vertical',
bottom: '5%',
itemGap: 15,
itemWidth: 20,
itemHeight: 20,
data: [],
formatter: null, // 用函数返回 legend 的文本
textStyle:{
rich:{ // 富文本,用以修改 legend 的样式
a:{
fontSize: 14,
color: '#333',
padding: [-3, 10, 0, 0],
},
b:{
fontSize: 18,
color: '#333',
fontWeight: 'bold',
padding: [-4, 0, 0, 10],
}
}
}
},
const hostSeriesData = [
{ value: 70, name: '运行(台)' },
{ value: 10, name: '异常(台)' },
{ value: 10, name: '停止(台)' },
];
formatter = (name) => {
let target = null;
for (let i = 0; i < hostSeriesData.length; i++) {
if (hostSeriesData[i].name === name) {
target = hostSeriesData[i].value;
}
}
let arr=["{a|"+name+"}", "{b|"+target+"}"];
return arr.join('');
}