在 ECharts 中,你可以通过图例组件的 formatter 属性结合富文本标签来配置富文本样式。富文本样式允许你在同一个文本中使用不同的样式,比如不同的颜色、字体大小等。以下是一个简单的示例:
option = {
    // 其他配置项...
    legend: {
        data: ['系列1', '系列2', '系列3'],
        formatter: function (name) {
            // 使用富文本标签,可以设置不同的样式
            return '{styleA|' + name + '} {styleB|自定义样式}';
        },
        textStyle: {
            rich: {
                styleA: {
                    color: 'red',
                    fontSize: 16,
                    fontWeight: 'bold',
                },
                styleB: {
                    color: 'blue',
                    fontSize: 12,
                },
                // 其他富文本样式定义...
            },
        },
        // 其他图例相关配置项...
    },
    series: [
        {
            name: '系列1',
            type: 'bar',
            data: [1, 2, 3, 4, 5],
            // 其他系列配置项...
        },
        // 其他系列配置项...
    ],
};

在上面的例子中,通过 rich 属性在 textStyle 中定义了两个富文本样式,分别是 styleA 和 styleB。在 formatter 属性中,通过使用富文本标签 {styleA|} 和 {styleB|},将不同的样式应用到图例文本的不同部分。

通过使用富文本样式,你可以更灵活地定制图例文本的外观,实现更加丰富和多样化的效果。


转载请注明出处:http://www.zyzy.cn/article/detail/5125/ECharts