一、问题描述

在使用ECharts图表时，比较常见到显示类目超出显示范围的的情况，如下图左侧类目：

二、解决方案

在配置项总对象option中添加如下代码：

grid:{
   left:'100',
   containLabel:0
},

三、 属性解读

1、 grid.left是指grid组件离容器左侧的距离。

• left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以 是 'left', 'center', 'right'。

• 如果 left 的值为 'left', 'center', 'right'，组件会根据相应的位置自动对齐。

2、 grid.containLabel是指grid 区域是否包含坐标轴的刻度标签

• containLabel 为 false 的时候：

  • grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。
  • 这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。

• containLabel 为 true 的时候：

  • grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
  • 这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。