当业绩数据的第一个数据低于2500的情况下,柱状图会覆盖x轴,出现显示问题。如果把数据改为2500以上就不会有这种问题。
配置项如下
app.title = '多 Y 轴示例';
var colors = ['#5793f3', '#d14a61', '#675bba'];
option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
legend: {
data: ['业绩', '完成率']
},
xAxis: [{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月']
}],
yAxis: [{
type: 'value',
name: '业绩',
scale: false,//把这个属性去了 或者是改成false就可以了,默认是false,可以去看配置手册
position: 'left',
axisLine: {
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value}'
}
}, {
type: 'value',
name: '完成率',
scale: true,
position: 'right',
offset: 80,
axisLine: {
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value}'
}
}],
series: [{
name: '业绩',
type: 'bar',
data: [5231, 1964, 1571, 1256, 790, 7804, 619, 614, 423, 421]
}, {
name: '完成率',
type: 'line',
yAxisIndex: 1,
data: [44.62, 39.28, 19.64, 15.7, 15.8, 8.8, 12.38, 12.28, 8.46, 5.26]
}]
};