当前位置:网站首页>echart 设置柱子之间的间距

echart 设置柱子之间的间距

2020-11-09 15:18:03 灰太狼的情与殇

echart 设置柱子之间的间距

1.开发环境 vue+echarts
2.电脑系统 windows10专业版
3.在使用vue+echarts开发的过程中,我们总是会使用到 柱状图,下面我分享一下柱状图中柱子之间的间距怎么修改,希望对你有所帮助。
4.官方案例,简单配置之后效果如下:
image.png
5.怎么缩小,柱子之间的间距呢?添加如下配置:

series : 
            {
               name:'',
               type:'bar',
               //barWidth:20, //设置柱子的宽度
               barGap:'0%',/*多个并排柱子设置柱子之间的间距*/
               barCategoryGap:'0%',/*多个并排柱子设置柱子之间的间距*/
               data:[],
           }

6.添加配置之后,效果图如下:
image.png
7.本期的分享到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰!

版权声明
本文为[灰太狼的情与殇]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000037772998