在 Echarts 中设置折线图x轴文字的倾斜度

追逐原野.

已于 2022-04-22 21:58:37 修改

阅读量3.6k

点赞数 1

文章标签：前端

于 2022-04-21 23:01:44 首次发布

本文链接：https://blog.youkuaiyun.com/m0_64564920/article/details/124334195

版权

本文介绍了如何在 Echarts 折线图中实现x轴文字的倾斜效果，通过添加特定配置实现这一视觉调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 Echarts 中设置折线图x轴文字的倾斜度

在工作需求中，有需要把 Echarts 折线图的文字变成倾斜的样式。类似这样的：
在这里插入图片描述
这个功能咋实现？很简单。加一句话就行了

// 配置项
option = {
  xAxis: {
    type: 'category',
  + axisLabel: {
  +    rotate: 30 // 倾斜30度
  + },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    axisLabel:{}
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

大功告成！