echarts 刻度间距-echarts图表Y轴刻度值过长时显示不全的解决办法

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

1.配置网格属性

网格组件距容器侧面的距离。

left 的值可以是特定的像素值，例如 20，与容器的高度和宽度的比率echarts 刻度间距，例如“20%”，或“left”、“center”、“right”。 如果left的值为'left'、'center'、'right'，则组件会根据对应的位置手动对齐。

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  grid: {
    // top:48,
    left: '50%', // 调整这个属性
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

2.配置formatter属性

刻度标签的内容格式化程序支持两种方法：字符串模板和回调函数。

例子：

使用字符串模板，模板变量为刻度默认标签{value}

formatter: '{value} kg'

使用函数模板echarts 刻度间距，函数参数为刻度值和刻度的索引

  yAxis: {
    axisTick: {
      show: false,
    },
    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;
      },
    },
  },

情况1：当坐标上的内容为文本时

对于像上面这样的垂直直方图，如果y轴的内容太长echarts设置y轴数值，就会显示不完整。

由于数据是前端传过来的，有的会很长echarts设置y轴数值，有的会比较短。 如果一味地调整网格，短数据前的空白就会过多，布局也会不合理。 这时候就需要用到一些其他的属性了。

解决方案：

在yAxis中的axisLabel中添加如下属性配置：

笔记：

width: 60,//将内容的宽度固定
overflow: 'truncate',//超出的部分截断
truncate: '...',//截断的部分用...代替

附上官方文档截图：

情况2：如果纵轴是数字

如图，两边的数据都会不完整

1、首先可以配置网格自适应

grid: {
            top: "15%",
            left: "2%",
            right: "2%",
            bottom: "2%",
            containLabel: true
          },

设置完成后，数字将完整显示：

然而，新的需求又来了。 如果数据很大，右边的数据会占据越来越宽的位置，导致布局不美观，所以我们可以对这些数字进行处理

在 yAxis 的 axisLabel 属性中配置格式化程序

formatter(v) {
                    v = v.toString()
                    if (v >= 100000000000) {
                        return (v.substring(0, 5) / 10) + '亿'
                    } else if (v >= 10000000000) {
                        return (v.substring(0, 4) / 10) + '亿'
                    } else if (v >= 1000000000) {
                        return (v.substring(0, 3) / 10) + '亿'
                    } else if (v >= 100000000) {
                        return (v.substring(0, 2) / 10) + '亿'
                    } else if (v >= 10000000) {
                        return v.substring(0, 4) + '万'
                    } else if (v >= 1000000) {
                        return v.substring(0, 3) + '万'
                    } else if (v >= 100000) {
                        return v.substring(0, 2) + '万'
                    } else if (v >= 10000) {
                        return (v.substring(0, 2) / 10) + '万'
                    } else if (v >= 1000) {
                        return v
                    } else {
                        return v
                    }
                },

这样设置后，疗效如右图：

这样设置的目的是右边不会因为数据太大而一次扩大表格左边的长度