问题

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

解决思路

最先开始google发现都是x轴溢出的问题解决方案,并没有找到类似于这种情况。于是乎只能乖乖的看echart官方文档一步步调试,主要看widthheight相关的配置。最终在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配置后显示正常