实现ECharts双Y轴左右刻度线⼀致的例⼦不⼀致的情况如下图：
setoption
修改成⼀致的情况如下图：
代码如下：
yAxis : [
{
type : 'value',
name : '⼈数',
//splitLine:{show:false},
axisLabel : {
formatter: '{value} 个',
textStyle:{color: '#A23400'}//#A23400 purple
},
axisLine:{
lineStyle:{color:'#A23400',width:'1'} //y轴坐标轴颜⾊ #A23400 black            }
},
{
type : 'value',
name : '⼈次',
//splitLine:{show:false},
axisLabel : {
formatter: qfamtter,
textStyle:{color: '#00AEAE'}//#00AEAE blue
},
axisLine:{
lineStyle:{color:'#00AEAE',width:'1'} //y轴坐标轴颜⾊ #00AEAE black            },
min: 0,
max: Max2*2,
splitNumber: 6,
interval: (Max2*2 - 0) / 6
}
其中需要加：
min: 0,
max: Max2*2,
splitNumber: 6,
interval: (Max2*2 - 0) / 6
左边Y轴默认了分成6段，所以要把右边Y轴也分成6段。
附加：jquery 数组获取最⼤值和最值的⽅法，仅供参考
//计算最⼤值
function cal_Max(a) {
//debugger
a=$.grep(a,function(n,i){return i>0;});
var maxval = Math.max.apply(null, a);
return maxval;
}
//计算最⼩值
function calMin(a) {
a=$.grep(a,function(n,i){return i>0;});
var minval = Math.min.apply(null, a)
return minval;
}
补充知识：echarts 两个y轴展⽰折线图，并使两个y轴刻度线重合效果如图：
y轴刻度不重合情况：
代码如下，具体的数据处理就不再⼀⼀展⽰，只看画图部分：
drawGraphChart() {
// 具体的数据格式可以参考： echarts.baidu/examples/editor.html?c=multiple-y-axis
// 处理两个y轴的最⼤值 => 为使两个y轴的标度线完全重合
// 拿到左右两个y轴的最⼤数据之后给他们分别取整成为最终 y轴上展⽰的值也是为了能够确保两个值都能整除10
const maxY1 = parseInt((Math.max(...maxData1) + 2000) / 1000) * 1000
const maxY2 = parseInt((Math.max(...maxData2) + 10) / 10) * 10
// var color = ['#d14a61', '#5793f3'], // 这个颜⾊和y轴的颜⾊对应，如果画的曲线较少，可以直接⽤两种颜⾊区分线是按照哪个坐标轴的刻度画的  const option = {
title: {
left: 20,
text: '趋势图'
},
xAxis: {
type: 'category',
// boundaryGap: false, // 数据完全填充x轴
data: RepeatTimeArr // x轴时间
},
legend: {
type: 'scroll',
right: 120,
top: 0,
left: '65%',
bottom: 0,
data: legendTankNum // 图例
},
grid: {
left: '6%',
right: '6%',
top: '14%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
yAxis: [
{
type: 'value',
name: '体积',
min: 0,
max: maxY1, // 左侧y轴最⼤值
// 两个y轴的刻度必须整除⼀个相同的数才能重合
interval: il(maxY1 / 10), // 间距等分为10等分
position: 'left', // y轴在左侧
// y轴的颜⾊和按y轴刻度画的曲线的颜⾊
// axisLine: {
//  lineStyle: {
//  color: color[0]
//  }
// },
axisLabel: {
formatter: '{value} L'
}
},
{
type: 'value',
name: '温度',
min: 0,
max: maxY2, // 右侧y轴最⼤值
interval: il(maxY2 / 10), // 间距等分为10等分
position: 'right', // y轴在右侧
// axisLine: {
//  lineStyle: {
//  color: color[1]
/
/  }
// },
axisLabel: {
formatter: '{value} °C'
}
}
],
toolbox: {
right: 80,
top: -5,
feature: {
saveAsImage: {}
}
},
// {name: '--',type: 'line',data:[0,0,0···]}
series: allRealData
}
// true 图数据不叠加
}
以上这篇实现ECharts双Y轴左右刻度线⼀致的例⼦就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。