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

刺骨的言语ヽ痛彻心扉 2023-10-06 14:18 79阅读 0赞

### 1 使用详解 ###

**yAxis.axisLabel.formatter**

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

默认：'\{value\} '。

参数类型：string，Function

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

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

### 2 原始效果图 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

### 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 实现代码（函数模板） ####

### 4 最终效果图 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 2][]

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

[ECharts formatter_3]: https://blog.csdn.net/qq_38974638/article/details/108986033
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200718093540386.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200805203849667.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200805205534889.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[1d5330f89298af44e002d6b2230b47659e28c05a.jpg]: https://i1.hdslb.com/bfs/face/1d5330f89298af44e002d6b2230b47659e28c05a.jpg
[Bilibili_Bilibili_B_1d5330f89298af44e002d6b2230b47659e28c05a.jpg_https_space.bilibili.com_484264966_spm_id_from_333.1007.0.0]: https://space.bilibili.com/484264966?spm_id_from=333.1007.0.0