图表展示X轴标题展示不全

图表展示X轴标题展示不全

一、前言

我们做图表展示的时候数据都是动态的，而X轴的长度有限，此时如果设置了X轴标题内容过程会出现：标题展示不全的问题。

如图所示，图表展示十条数据，但下方标题只展示了五条；无法完全展示，可读性就很差。

二、涉及知识点

这里只要以Echarts图表为例，既然是X轴展示不全的问题，我们就需要去查看X轴的配置API。官网API地址：https://echarts.apache.org/v4/zh/option.html#xAxis

关于X轴的配置我们只需要查看**xAxis（直角坐标系 grid 中的 x 轴）**的配置属性即可，下面我们只介绍本次用到的几个配置：

2.1 axisLabel.interval（type：number）

强制设置坐标轴分割间隔。上图中每个标题之前间隔较大就会导致全部标题内容展示不全，可以设置为0，取消间隔。

2.2 axisLabel.formatter（type: string | function）

刻度标签的内容格式器，支持字符串模板和回调函数两种形式。

// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'

// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
    // 格式化成月/日，只在第一个刻度显示年份
    var date = new Date(value);
    var texts = [(date.getMonth() + 1), date.getDate()];
    if (index === 0) {
        texts.unshift(date.getYear());
    }
    return texts.join('/');
}
1
2
3
4
5
6
7
8
9
10
11
12
13

利用上方函数模板便可以将文字竖直展示。效果图如下：

2.3 axisLabel. rotate（type: number）

刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度。

看上图中虽然标题都出来了，但还是展示不全，可以用这个属性旋转倾斜一下标题查看是否能完全展示；

2.4 axisLabel. margin（type: number）

刻度标签与轴线之间的距离。如果倾斜之后标题与轴线重合或是覆盖，可以用此属性增大他们之间的距离。

2.5 axisLabel. padding（type: number | array）

文字块的内边距。如果倾斜角度过大，会出现标题和图表不对应。

此时便可设置padding，微调文字快内边距调整位置。

2.6 grid（type: object）

直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。简单来说就是控制图表与边界之间的距离，从2.5中图片所示：由于X轴与边界过近导致标题竖直展示不全，我们需要设置grid属性来增大X轴与边界的距离。

  grid: { 
    bottom: 140,
  },
1
2
3

最终效果图：

三、解决方案完整代码

上面介绍了对应知识点，现在贴上核心代码，遇到对应问题便可以用当前代码解决，修改对应偏移值即可；

const option = {
  // 控制图边框的大小
  grid: { 
    bottom: 140,
  },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: ['x轴数据源'],
      axisLabel: {
            height: '200px',
            color: '#333',
            fontStyle: 'oblique',
            rotate: -30, // 旋转角度
            margin: 82,	 // 标签与轴线之间的距离
		    interval: 0, // 标题间隔
		    padding: [0,0,0,-50], // 微调文字边距
          	//  让x轴文字方向为竖向
            formatter: function(value) {
              return value.split('').join('\n')
            }
          }
    }
  ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

四、补充：其他实用图表配置

4.1 X轴展示标题过多设置区域缩放滚动

 // 区域缩放，可以概览数据整体 
dataZoom : [
	{
      // 类型inside（内置滚动）slider（外侧滚动条）
      type: 'slider', 
      show: true,
      start: 0,	// 数据窗口范围的起始百分比
      end: 40,// 数据窗口范围的结束百分比
      minSpan: 40,// 用于限制窗口大小的最小值（百分比值）
      // left/right/top/bottom-设置组件离容器位置
    },
  ],
1
2
3
4
5
6
7
8
9
10
11
12

4.2 Y轴数值展示配置

series: [
    {
      name: 'Forest',//name名
      type: 'bar', // 图表类型
      barGap: 0, // 不同系列的柱间距离
      label: { // Y轴文字配置
          show: true,
          position: 'insideBottom',// 标签的位置。
          distance: 10, // 距离图形元素的距离
          align: 'left', // 水平对齐方式
          verticalAlign: 'middle',// 文字垂直对齐方式
          rotate: 45, // 标签旋转。从 -90 度到 90 度
          formatter: '{c}  {name|{a}}',// 标签内容格式器
          fontSize: 16,
          rich: { // 自定义富文本样式
            name: {}
          }    
      },
      itemStyle: {
         color: 'skyblue'
      },
      barWidth: '20%',
      data: ['数据源']
    },
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25