左侧截图是我项目中的截图。
代码为我项目中的代码,echarts各个配置项完全一致,数据是随机写的。但是在我的项目里,若y轴名称过长会导致显示不全,在这里没事,不知道为什么。跟div有关??containLabel: true 写着呢,bar不根据我y轴的文字多少去按比例改变长度自适应。求助!
配置项如下
option = {
toolbox: {
right: '2%',
feature: {
saveAsImage: {
pixelRatio: 2
}
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: '#323232',
opacity: 0.1
},
}
},
legend: {
itemGap: 20,
itemWidth: 30,
itemHeight: 10,
data: ['type_1', 'type_2', 'type_3', 'type_4', 'type_5', 'type_6', 'type_7']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: ['#e4e4e4'],
type: 'dashed',
width: 1
}
},
axisLine: {
show: false
},
axisTick: {
show: false
}
},
yAxis: {
type: 'category',
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
margin: 15,
textStyle: {
align: 'right',
color: '#323232',
fontSize: 12
}
},
data: ["名称1","名称2","名称3名称3名称3","名称4","名称5","名称6", "名称7名称7名称7名称7名称7名称7名称7名称7名称7名称7名称7", "名称8", "名称9", "名称10", "名称11", "名称12"]
},
series: [{
name: 'type_1',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight',
formatter: function(d) {
return d.value > 0 ? d.value : "";
}
}
},
barWidth: 30,
itemStyle: {
normal: {
color: '#ffae01',
barBorderRadius: [2, 2, 2, 2],
borderColor: '#fff',
}
},
data: [0,0,0,0,0,10,20,30,40,50,60,70]
}, {
name: 'type_2',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight',
formatter: function(d) {
return d.value > 0 ? d.value : "";
}
}
},
barWidth: 30,
itemStyle: {
normal: {
color: '#ff6600',
barBorderRadius: [2, 2, 2, 2],
borderColor: '#fff',
}
},
data: [0,0,0,0,0,10,20,30,40,50,60,70]
}, {
name: 'type_3',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight',
formatter: function(d) {
return d.value > 0 ? d.value : "";
}
}
},
barWidth: 30,
itemStyle: {
normal: {
color: '#00d789',
barBorderRadius: [2, 2, 2, 2],
borderColor: '#fff',
}
},
data: [0,0,0,0,0,10,20,30,40,50,60,70]
}, {
name: 'type_4',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight',
formatter: function(d) {
return d.value > 0 ? d.value : "";
}
}
},
barWidth: 30,
itemStyle: {
normal: {
color: '#00a8ff',
barBorderRadius: [2, 2, 2, 2],
borderColor: '#fff',
}
},
data: [0,0,0,0,0,10,20,30,40,50,60,70]
}, {
name: 'tyoe_5',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight',
formatter: function(d) {
return d.value > 0 ? d.value : "";
}
}
},
barWidth: 30,
itemStyle: {
normal: {
color: '#ab74e9',
barBorderRadius: [2, 2, 2, 2],
borderColor: '#fff',
}
},
data: [0,0,0,0,0,10,20,30,40,50,60,70]
}, {
name: 'type_6',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight',
formatter: function(d) {
return d.value > 0 ? d.value : "";
}
}
},
barWidth: 30,
itemStyle: {
normal: {
color: '#08c8e5',
barBorderRadius: [2, 2, 2, 2],
borderColor: '#fff',
}
},
data: [0,0,0,0,0,10,20,30,40,50,60,70]
}, {
name: 'type_7',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight',
formatter: function(d) {
return d.value > 0 ? d.value : "";
}
}
},
itemStyle: {
normal: {
barBorderRadius: [2, 2, 2, 2],
color: '#fc6769',
borderColor: '#fff',
}
},
barWidth: 30,
data: [0,0,0,0,0,10,20,30,40,50,60,70]
}]
};