Echarts怎样自定义坐标轴标签

在 ECharts 中，你可以通过修改 axisLabel 属性来自定义坐标轴标签。以下是一个示例，展示了如何自定义 X 轴和 Y 轴的标签：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
            textStyle: {
                color: '#333', // 文字颜色
                fontSize: 14, // 文字大小
                fontWeight: 'bold' // 文字粗细
            },
            formatter: function (value, index) {
                // value 是当前标签的值，index 是当前标签的索引
                // 在这里可以根据需要对标签进行自定义处理
                return value.toUpperCase(); // 将标签转换为大写
            }
        }
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            textStyle: {
                color: '#333', // 文字颜色
                fontSize: 14, // 文字大小
                fontWeight: 'bold' // 文字粗细
            },
            formatter: function (value, index) {
                // value 是当前标签的值，index 是当前标签的索引
                // 在这里可以根据需要对标签进行自定义处理
                return '¥' + value.toFixed(2); // 在数值前添加货币符号，并保留两位小数
            }
        }
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

在这个示例中，我们自定义了 X 轴和 Y 轴的标签样式（包括颜色、大小和粗细），并使用 formatter 函数对标签进行了自定义处理。你可以根据自己的需求修改这些设置。