现在在开发一个Echar的柱状图。遇到了几个问题，搜索了半天才弄好，写下来供后来人参考：
问题1：柱子的颜色要各种颜色，而不是同一种颜色；
问题2：在柱子数量少的时候，剩下的柱子不要太粗，否则不好看；
问题3：实际上的统计信息，其数据都是整数，没有小数。所以希望图形中的刻度也不要出现小数；
问题4：如果窗口大小变化，图表可以自动进行调整；
为了解决上面的四个问题，我对Echar进行了如下的设置：
var curChart = echarts.init(document.getElementById(showDivId));
// 初始化report对象
curChart.setOption({
title: {
subtext: '单位:个',
subtextStyle: {
"fontSize": 13,
"fontWeight": 'bolder',
"color": "#000000"
},
x: 'right',
y: 'top',
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 1],
min:0,
minInterval: 1 //解决问题3：实际上的统计信息，其数据都是整数，没有小数。所以希望图形中的刻度也不要出现小数；
},
yAxis: {
type: 'category',
data:[]
},
series: [
{
type: 'bar',
barMaxWidth: '50', //解决问题2：在柱子数量少的时候，剩下的柱子不要太粗，否则不好看；
itemStyle: {
normal: {
color: function (params) {
// build a color map as your need.
//解决问题1：柱子的颜色要各种颜色，而不是同一种颜色；
var colorList = [
'#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
'#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
];
return colorList[params.dataIndex]
}
}
},
data: []
}
]
});
//根据窗口大小调整图表
window.onresize = curChart.resize; //解决问题4：如果窗口大小变化，图表可以自动进行调整；
供大家参考
如果觉得《EChar中的柱状图如何设置柱子的最大宽度和刻度的最小间隔》对你有帮助，请点赞、收藏，并留下你的观点哦！
