折线图X坐标展示间隔控制

Howe_Hzc

于 2022-03-29 13:55:50 发布

阅读量660

点赞数

分类专栏： echart使用文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_39892395/article/details/123819714

版权

echart使用专栏收录该内容

1 篇文章

订阅专栏

过多的展示导致X轴叠加：

添加间隔 axisLabel 控制：

xAxis: {
    type: "category",
    boundaryGap: false,
    data: [],
    axisLine: {
        lineStyle: {
        type: "solid",
        color: "#75C5FF", //左边线的颜色
        },
    },
    axisLabel: {
       interval: 0,   //主要设置其间隔
    }
},

动态根据数量多少来控制，超出20个就间隔4个的标准展示

this.option.xAxis.axisLabel.interval = this.coordinateXData.length > 20? 4 : 0

添加属性控制效果：