如何使用echarts给y轴x轴添加单位

逃离我推掉我的手 2022-11-02 15:27 473阅读 0赞

### 如何使用echarts给y轴x轴添加单位 ###

*   *  y轴每个单位刻度加单位使用
     *  y轴顶部设置单位
     *  x轴添加单位

## y轴每个单位刻度加单位使用 ##

yAxis: [
                    {                    
                        type: 'value',
                        axisLabel: { formatter: '{value} 单'},
                    }
                ],

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70]

## y轴顶部设置单位 ##

使用title来说明y轴的含义数据的就行:

option = { 
                title: { 
                    text: 订单来源分析+ '（单位为:单）',
                    x: 'center'
                },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 1]

还有一种是

yAxis: [
                    { 
                        //单位
                        name: '单',
                        type: 'value',
                    }
                ],

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 2]

## x轴添加单位 ##

xAxis: [
                    { 
                        name: '辆',     //关键代码
                        nameTextStyle: {          //关键代码 
                            padding: [30, 0, 0, -30],
                        },
                        type: 'category',
                        data: ['优酷','公共','小程序'],
                        axisLabel: { 
                            interval: 0,
                            rotate: 28,//倾斜度
                        },
                        axisTick: { 
                            alignWithLabel: true
                        }
                    }
                ],

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70]: /images/20221024/0c4a0d4cec0449a7ae8144b2c4db15cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 1]: /images/20221024/49e38946c62f47ce85a1b40529cfbd57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 2]: /images/20221024/17bd3bc959c84e8fa687a406251cccd1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 3]: /images/20221024/c190bcc774e947ddaaa3ea7d768f5c45.png