解决Echarts图表在宽高较小的div中被压缩或显示不全的问题
问题
最近在项目中画监控一张图的时候遇到一个问题。某个div
中需要话一个柱状图,但是这个div只是整个页面中的一小部分,当从echart官网示例中调试好复制到项目中时,发现图表被压缩成一条线如下图
解决思路
最先开始google发现都是x轴溢出的问题解决方案,并没有找到类似于这种情况。于是乎只能乖乖的看echart官方文档一步步调试,主要看width
和height
相关的配置。最终在grid
配置项找到了解决方法。
添加grid
配置项:
# gird配置中默认width和height都是 auto,只要配置grid网格上下左右距离,然后让宽高自动即可
grid: {
left: '0%',
right: '10%',
top: '3%',
bottom:'3%',
containLabel: true
}
完整的option
配置如下:
_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
配置后显示正常
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 tangseng233的日常!
评论