先上圖：
這是未解決的穷蛹，雙Y軸左右刻度線不一致? ? ? ? ? ?? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ?
這是已解決的，雙Y軸左右刻度線一致? ? ?
1昼汗、原因
刻度在顯示時肴熏，分割段數(shù)不一樣，導(dǎo)致左右的刻度線不一致乔遮，不能重合在一起扮超。
2、思路
根據(jù)上面的原因去分析蹋肮，要想左右的刻度線一致出刷，分隔的段數(shù)是必須是一樣的，這樣才能重合坯辩。
3馁龟、解決方法
①首先固定兩邊的分隔的段數(shù)。
①分別求出左邊Y軸和右邊Y軸的最大值max和最小值min漆魔，根據(jù)max和min之間的和去除以分隔的段數(shù)坷檩，分別算出左邊Y軸和右邊Y軸的分隔間隔。
②在ECharts中有兩個很重要的屬性：
interval：強(qiáng)制設(shè)置坐標(biāo)軸分割間隔改抡。
splitNumber：坐標(biāo)軸的分割段數(shù)矢炼，需要注意的是這個分割段數(shù)只是個預(yù)估值，最后實際顯示的段數(shù)會在這個基礎(chǔ)上根據(jù)分割后坐標(biāo)軸刻度顯示的易讀程度作調(diào)整阿纤。
根據(jù)上面的值句灌，結(jié)合min和max屬性去配置ECharts。
4欠拾、源碼
app.title='折柱混合';
//計算最大值
functioncalMax(arr){
letmax=0;
arr.forEach((el)=>{
el.forEach((el1)=>{
if(!(el1===undefined||el1==='')){
if(max<el1){
max=el1;
? ? ? ? ? }
? ? ? ? }
})
})
letmaxint=Math.ceil(max/9.5);//不讓最高的值超過最上面的刻度
letmaxval=maxint*10;//讓顯示的刻度是整數(shù)
returnmaxval;
? }
//計算最小值
functioncalMin(arr){
letmin=0;
arr.forEach((el)=>{
el.forEach((el1)=>{
if(!(el1===undefined||el1==='')){
if(min>el1){
min=el1;
? ? ? ? ? }
? ? ? ? }
})
})
letminint=Math.floor(min/10);
letminval=minint*10;//讓顯示的刻度是整數(shù)
returnminval;
? }
vardata1=[59357.9,52789.77,24837.98,14345.02,2291.93],
data2=[-12108.81,701.43,1280.75,-2109.83,-18693.95],
data3=[0,-11.07,-52.95,-42.25,-84.02],
data4=[0,105.79,82.59,-264.73,-786.04]
varMin1=calMin([data1,data2]),Min2=calMin([data3,data4]),
Max1=calMax([data1,data2]),Max2=calMax([data3,data4]);
option={
grid:{left:'100',right:'100',bottom:'100',top:'100'},
color:['#0698d6','#fd8246','#d773b4','#41ac7c','#e86367','#aada9c'],
tooltip:{trigger:'axis',axisPointer:{type:'cross',crossStyle:{color:'#999'}}},
legend:{data:['營業(yè)收入','凈利潤','營業(yè)收入同比增長率','凈利潤同比增長率']},
xAxis:[{
type:'category',
show:false,
lineWidth:0,
axisPointer:{
type:'shadow'
? ? ? },
data:["2013-12-31","2014-12-31","2015-12-31","2016-12-31","2017-12-31"]
? ? }],
yAxis:[{
name:'單位：萬元',
nameTextStyle:{color:'#999999'},
type:"value",
axisLine:{show:false},
axisTick:{show:false},
axisLabel:{verticalAlign:"bottom",color:"#999999"},
min:Min1,
max:Max1,
splitNumber:5,
interval:(Max1-Min1)/5
? ? }, {
name:'單位：%',
type:'value',
nameTextStyle:{color:'#999999'},
axisLine:{show:false},
axisTick:{show:false},
axisLabel:{verticalAlign:"bottom",color:"#999999"},
min:Min2,
max:Max2,
splitNumber:5,
interval:(Max2-Min2)/5
? ? }],
series:[{name:'營業(yè)收入',type:'bar',barGap:0,barWidth:30,data:data1},
{name:'凈利潤',type:'bar',barGap:0,barWidth:30,data:data2},
{name:'營業(yè)收入同比增長率',type:'line',yAxisIndex:1,data:data3},
{name:'凈利潤同比增長率',type:'line',yAxisIndex:1,data:data4}
? ? ]
? }
原文：https://blog.csdn.net/qq_40845885/article/details/82108525?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control
