| echart实现两个Y轴的0刻度线一致 | 您所在的位置：网站首页 › excel左右坐标轴0刻度对齐 › echart实现两个Y轴的0刻度线一致 |
echart实现两个Y轴的0刻度线一致
|
option = {
color: ['#87CEFA', '#FF8C00', '#D3D3D3'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56',
},
},
},
legend: {
data: ['交付达成项次', '平均交付天数'],
bottom: 0,
},
toolbox: {
show: false,
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {},
},
},
dataZoom: {
show: false,
start: 0,
end: 100,
},
xAxis: [
{
type: 'category',
boundaryGap: true,
data: (function () {
var res = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
return res;
})(),
},
],
yAxis: [
{
type: 'value',
scale: true,
// min: 0,
boundaryGap: [0.2, 0.2],
splitLine: false,
max: function (value) {
if (Math.abs(value.max) > Math.abs(value.min)) {
return (Math.abs(value.max) * 1.2).toFixed(2);
} else {
return (Math.abs(value.min) * 1.2).toFixed(2);
}
},
min: function (value) {
if (Math.abs(value.max) > Math.abs(value.min)) {
return (-Math.abs(value.max) * 1.2).toFixed(2);
} else {
return (-Math.abs(value.min) * 1.2).toFixed(2);
}
},
},
{
type: 'value',
scale: true,
boundaryGap: [0.2, 0.2],
splitLine: false,
max: function (value) {
if (Math.abs(value.max) > Math.abs(value.min)) {
return (Math.abs(value.max) * 1.2).toFixed(2);
} else {
return (Math.abs(value.min) * 1.2).toFixed(2);
}
},
min: function (value) {
if (Math.abs(value.max) > Math.abs(value.min)) {
return (-Math.abs(value.max) * 1.2).toFixed(2);
} else {
return (-Math.abs(value.min) * 1.2).toFixed(2);
}
},
}],
series: [
{
name: '交付达成项次',
type: 'bar',
yAxisIndex: 1,
data: (function () {
var res = [0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 0, 0];
return res;
})(),
},
{
name: '平均交付天数',
type: 'line',
data: (function () {
var res = [0, 0, 0, 0, 0, 0, 0, 0, -9.73, -12.573333, 0, 0];
return res;
})(),
},
],
};
效果图
如图所示，只要保证两条y轴的最大最小值绝对值一致，则0刻度线也会在同一水平线，这样不会导致数据错乱。 原文博客：https://blog.csdn.net/u014744118/article/details/81543012 |
【本文地址】
公司简介
联系我们