Echart折线图篇:x轴坐标label显示不全的解决办法

最新推荐文章于 2024-06-10 22:30:03 发布

HaanLen

最新推荐文章于 2024-06-10 22:30:03 发布

阅读量4.5k

点赞数

分类专栏： Echart

本文链接：https://blog.csdn.net/weixin_40119412/article/details/121178735

版权

echarts 前端 javascript

Echart 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

折线图数据信息

let xAxisData = ['2021-10-01', '2021-10-02', '2021-10-02','2021-10-02', '2021-10-02', '2021-10-02', '2021-10-02', '2021-10-02', '2021-10-02', '2021-10-02', '2021-10-02'];
let seriesData = [
  {
    name: 'Forest',
    data: [8120, 932, 1901, 934, 1290, 41330, 1320,1290,1290,1290,1290],
    type: 'line',
    smooth: true,
    symbol:'none',
  },
  {
    name: 'Steppe',
    data: [1020, 732, 9901, 41934, 1290, 13300, 11320,1290,1290,1290,1290],
    type: 'line',
    smooth: true,
    symbol:'none',

  },
  {
    name: 'Banans',
    data: [4020, 3732, 6901, 41934, 9290, 23300, 61320,1290,1290,1290,1290],
    type: 'line',
    smooth: true,
    symbol:'none',

  }
]

默认效果,x轴label不做处理
在这里插入图片描述

让x轴label全部显示

      xAxis: {
        type: 'category',
        data: xAxisData,
        axisLabel: {
          interval: 0,
        },
      },

在这里插入图片描述

但是label会出现重叠的情况

在这里插入图片描述

让x轴label倾斜显示,不再发生重叠效果

      xAxis: {
        type: 'category',
        data: xAxisData,
        axisLabel: {
          interval: 0,
          rotate: 45,
        },
      },