刻度的最小间隔"/>
EChar中的柱状图如何设置柱子的最大宽度和刻度的最小间隔
现在在开发一个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中的柱状图如何设置柱子的最大宽度和刻度的最小间隔
发布评论