echarts柱状图柱子最小高度，柱子最小宽度设置

六月初六月初 Echarts 2019-01-17 10:05:54

效果预览：


问题描述：设置柱状图的最大宽度及最小高度；

实现方式：series中设置barMaxWidth（最大宽度）、barMinHeight（最小高度）

barMaxWidth：柱条的最大宽度，默认自适应；可设置具体值及百分比

barMinHeight：柱条最小高度，默认0，可设置具体值，（百分比无效）

上图完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.staticfile.org/echarts/4.2.0-rc.2/echarts.min.js"></script>
    </head>
    <body>
        <div id="test" style="height: 500px;width: 100%;">
            
        </div>
        <script>
            var BarBOX1 = echarts.init(document.getElementById("test"));
            option = {
			    xAxis: {
			        type: 'category',
			        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [{
			    	barMaxWidth:"50",//设置每根柱条最大宽度为50
			    	barMinHeight:"50",//设置每根柱条最小高度为50
			        data: [120, 0, 150, 80, 70, 110, 130],
			        type: 'bar'
			    }]
			};
            BarBOX1.setOption(option);
        </script>
    </body>
</html>

echarts柱状图柱子最小高度，柱子最小宽度设置


六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！