Echarts 饼图 legend自定义显示

6,460 阅读1分钟

先上图

小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('');
}