ECharts 使用yAxis.axisLabel.formatter自定义Y轴刻度标签--两种方法（字符串模板和函数模板）

1 使用详解

yAxis.axisLabel.formatter

说明：刻度标签的内容格式器，支持字符串模板和回调函数两种形式。

默认：'{value} '。

参数类型：string，Function

可选值：请参考以下博客。

 ECharts formatter属性设置3种方式（字符串模板，函数模板，回调函数）

2 原始效果图

3 实现代码 

3.1 实现代码（字符串模板）

var option = {
    title: {
        text: '第一个 ECharts 实例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
        boundaryGap: false,//x轴两边不留空白
    },
    yAxis: {
        type:"value",
        axisLabel:{
            formatter:"{value}件"//字符串模板
        }
    },
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

3.2 实现代码（函数模板） 

var option = {
    title: {
        text: '第一个 ECharts 实例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["1月","2月","3月","4月","5月","6月"],
        boundaryGap: false,//x轴两边不留空白
    },
    yAxis: {
        type:"value",
        axisLabel:{
            //函数模板
            formatter:function (value, index) {
                var result="";
                switch(value){
                    case 1:result="Ⅰ类";break;
                    case 2:result="Ⅱ类";break;
                    case 3:result="Ⅲ类";break;
                    case 4:result="Ⅳ类";break;
                    case 5:result="Ⅴ类";break;
                    default:"-";
                }
                return result;
            }
        }
    },
    series: [{
        name: '类别',
        type: 'line',
        data: [5, 2, 3, 1, 4, 2]
    }]
};

4 最终效果图

4.1 最终效果图（字符串模板自定义y轴刻度标签）

 4.2 最终效果图（函数模板自定义y轴刻度标签）

旭东怪的个人空间_哔哩哔哩_Bilibili旭东怪，人生低谷不可怕，可怕的是坚持不到人生转折点的那一天;旭东怪的主页、动态、视频、专栏、频道、收藏、订阅等。哔哩哔哩Bilibili，你感兴趣的视频都在B站。https://space.bilibili.com/484264966?spm_id_from=333.1007.0.0