在 ECharts 中,你可以通过 rich 属性来使用富文本样式设置单轴刻度标签。以下是一个简单的例子,演示如何使用富文本样式设置单轴刻度标签:
option = {
    singleAxis: {
        // 其他单轴图表的配置...
        type: 'category',  // 坐标轴类型,可以是 'category' 或 'value'
        data: ['Category A', 'Category B', 'Category C', 'Category D'],
        axisLabel: {
            show: true,
            rich: {
                labelA: {
                    color: 'red',
                    fontSize: 14,
                    fontWeight: 'bold'
                },
                labelB: {
                    color: 'green',
                    fontSize: 12
                },
                labelC: {
                    color: 'blue',
                    fontSize: 10
                }
                // 其他富文本样式配置...
            },
            formatter: function (value) {
                // 使用富文本样式
                return '{labelA|' + value + '}\n{labelB|Subtext}\n{labelC|' + value.length + '}';
            }
        },
        // 其他单轴配置...
    },
    series: [
        {
            type: 'scatter',
            data: [
                [1, 2],
                [2, 3],
                [3, 4],
                [4, 5]
            ]
        }
        // 其他系列配置...
    ]
};

在上述配置中,通过 rich 属性定义了不同样式的富文本标签,然后在 formatter 函数中使用这些富文本样式来设置刻度标签的显示内容。在 formatter 中,使用 {} 来引用富文本标签,例如 {labelA|' + value + '}。

这只是富文本样式配置的一小部分示例,你可以根据需要定义更多的富文本样式,并在 formatter 中使用它们来灵活控制刻度标签的样式和内容。


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