问题

最近在项目中画监控一张图的时候遇到一个问题。某个div中需要话一个柱状图，但是这个div只是整个页面中的一小部分，当从echart官网示例中调试好复制到项目中时，发现图表被压缩成一条线如下图

解决思路

最先开始google发现都是x轴溢出的问题解决方案，并没有找到类似于这种情况。于是乎只能乖乖的看echart官方文档一步步调试，主要看width和height相关的配置。最终在grid配置项找到了解决方法。

添加grid配置项：

1
2
3
4
5
6
7
8
# gird配置中默认width和height都是 auto，只要配置grid网格上下左右距离，然后让宽高自动即可
grid: {
    left: '0%',
    right: '10%',
    top: '3%',    
    bottom:'3%',
    containLabel: true
}

完整的option配置如下：

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
27
28
29
30
31
32
33
34
35
36
37
38
_this.fileOption = {
  xAxis: {
    show:false,
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['正常文件数', '异常文件数'],
  },
  //===新增配置项 start===
  grid: {
    left: '0%',
    right: '10%',
    top: '3%',
    bottom:'3%',
    containLabel: true
  },
  //====新增配置项 end====
  series: [{
    data: [
      {
        value: 30,
        itemStyle: {color: '#37D5EE'}
      },
      {
        value: 20,
        itemStyle: {color: '#FF3D62'}
      }
    ],
    type: 'bar',
    showBackground: true,
    barMinWidth: '20',
    label: {
      show: true,
      position: 'right'
    },
  }]
};

添加grid配置后显示正常