在 ECharts 中,axisPointer 的文本标签支持使用富文本(Rich Text)来配置,使得文本内容可以包含不同样式的文字。以下是一个简单的示例,演示如何配置 xAxis(横轴)上坐标轴指示器文本标签的富文本内容:
option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E'],
        axisPointer: {
            show: true,
            type: 'line',
            label: {
                show: true,
                formatter: function (params) {
                    return '{a|自定义标签:} {b|' + params.value + '} {c|单位}';  // 使用富文本格式
                },
                backgroundColor: 'rgba(0,0,0,0.7)',
                color: '#fff',
                padding: [5, 10],
                borderRadius: 5,
                rich: {
                    // 富文本样式定义
                    a: {
                        color: 'yellow',
                        fontSize: 14,
                        fontWeight: 'bold'
                    },
                    b: {
                        color: 'blue',
                        fontSize: 16
                    },
                    c: {
                        color: 'red',
                        fontSize: 12
                    }
                }
            }
        },
        // 其他 xAxis 配置项...
    },
    // 其他配置项...
};

在上述例子中,formatter 函数返回一个富文本字符串,其中使用了 {a|}, {b|}, {c|} 这样的标记,分别对应富文本中的不同部分。在 rich 属性中定义了每个标记的样式,可以设置颜色、字体大小等属性。

通过这种方式,你可以更灵活地配置坐标轴指示器文本标签的样式,包括不同部分的不同样式。


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