Echarts图表x轴y轴刻度值过长时显示不全(超过一千显示...k)

        在使用 Echarts 图表的过程中,有时候数值会很大导致该轴的刻度显示不全,如图:

        这个时候就需要将该轴的刻度值除以 1000 或 10000,再加一个单位来缩短它的长度;

        Echarts官网中为我们提供了专门用于修改刻度标签的刻度标签的内容格式器 formatter ,它需要在坐标轴刻度标签 axisLabel 中进行设置,可支持两种形式:

// 1.使用字符串模板,模板变量为刻度默认标签 {value}
formatter: '{value} kg'

// 2.使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
formatter: function (value, index) {
    return value + 'kg';
}

        其中,value就是当前刻度值的大小;

        据上图可以看出该图表的y轴刻度显示不全,所以我们在y轴进行操作,使用函数的形式;

yAxis: {
    type: "value",
    axisLabel: {
      color: "#444343",
      formatter: function (value, index) {
        // value大于1000时除以1000并拼接k,小于1000按原格式显示
        if (value >= 1000) {
          value = value / 1000 + "k";
        }else if(value < 1000){
          value;
        }
        return value;
      }
    },
}

        修改后效果如下:

  • 23
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 25
    评论
评论 25
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

敬 之

您的鼓励就是我持续创作的动力~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值