Echarts x轴文字显示不全、间隔显示问题

在 Vue 中使用 Echarts 渲染数据时，X 轴存在数据过多间隔显示文字的问题，考虑过缩短 X轴文字长度截取前几个字展示的解决方案，但效果不是很好，治标不治本。Echarts中提供了解决方案，关键词是 interval（间隔，间隙）xAxis: [{axisLabel:{interval: 0,// rotate:40,}},]

qwe122343

4085人浏览 · 2020-12-15 16:59:40

qwe122343 · 2020-12-15 16:59:40 发布

在 Vue 中使用 Echarts 渲染数据时，X 轴存在数据过多间隔显示文字的问题，考虑过缩短 X轴文字长度截取前几个字展示的解决方案，但效果不是很好，治标不治本。Echarts中提供了解决方案，关键词是 interval（间隔，间隙）

xAxis: [
          {
            axisLabel:{
              interval: 0,
              // rotate:40,
            }
          },
        ],

将 interval设置为 0，即可保证 X 轴文字全部展示，不会间隔展示
下图是实际展示（将 X 轴文字做了一些遮盖处理）
在这里插入图片描述

此外，关键词 rotate（旋转，转动）可使 X 轴文字倾斜展示，大家可以尝试

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^