如何让柱状图的柱子不紧挨坐标轴,如图所示
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
},
margin:10
}
],
yAxis: [
{
type: 'value',
margin:10
}
],
series: [
// 看这里,加一项数据,颜色设置透明
{
name: 'Direct',
stack:"one",
type: 'bar',
barWidth: '60%',
data: [20, 20, 20, 20, 20, 20, 20],
itemStyle: {
normal: {
//这里是重点
color: function (params) {
// 颜色设置透明
var colorList = ['rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)']
return colorList[params.dataIndex]
}
}
}
},
{
stack:"one",
name: 'Direct',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};