echarts双y轴实现（解决刻度线不对齐）

echarts双y轴实现（解决刻度线不对齐）

解决办法：让两个坐标轴共用一个最大值，可以刻度保持一致。
（即：拿到两数中最大的值作为共同的最大值）。
（第一次的方法）

var maxa = Math.max.apply(null, lista);//拿到左边y轴数组的最大值
var maxb = Math.max.apply(null, listb);//拿到右边y轴数组的最大值
var max= Math.max(maxa, maxb);//两个最大值之中的最大值

（注：这是改进之后的方法【避免出现最顶端有两条刻度线】）如果>100:变成整百；如果<100:变成整十

var dataList1=[223,533,24,43,56,23,36];
var dataList2=[343,45,353,243,554,443,22];
var maxa = Math.max.apply(null, dataList1)
var maxb = Math.max.apply(null, dataList2)
var cha = Math.max(maxa, maxb);//让两个坐标轴共用一个最大值，可以刻度保持一致
//1判断一下-------如果%10有余数，这说明不是十的倍数===》变成整十的倍数；
	 if((cha%10)!=0){
		cha=cha+(10-(cha%10));
	 }
//2或者--------->100就变成整百、<100就变成整十
if (cha > 100) {
		if ((cha % 100) != 0) {
			cha = cha + (100 - (cha % 100));
		}
	} else {
		if ((cha % 10) != 0) {
			cha = cha + (10 - (cha % 10));
		}
	}

(第一次的方法：虽然取了两个中的最大值，但是刻度划分不均匀)

（改进之后）效果图：

weeklyOrders(dateList, outOrderNum, outProNum);//单周出入库统计
function weeklyOrders(dateList, outOrderNum, outProNum) {
	myChart = echarts.init(document.getElementById('odEcharts'));
	var maxa = Math.max.apply(null, outOrderNum);//拿到左边y轴数组的最大值
	var maxb = Math.max.apply(null, outProNum);//拿到右边y轴数组的最大值
	var cha= Math.max(maxa, maxb);//两个最大值之中的最大值
	//判断一下-------如果%10有余数，这说明不是十的倍数===》变成整十的倍数；
	 if((cha%10)!=0){
		cha=cha+(10-(cha%10));
	 }
	// console.log(maxa, maxb);
	option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross'
			}
		},
		grid: {
			left: '5%',
			right: '5%',
			top: '15%',
			bottom: '0%',
			containLabel: true
		},//改变了图标的大小与位置

		legend: {
			padding: 10,    // [5, 10, 15, 20]
			itemGap: 50,
			itemWidth: 30,
			textStyle: { color: '#fff', fontSize: 14, lineHeight: 40, padding: [5, 10] },
			data: ['出库订单数量', '出库产品数量']
		},
		xAxis: [
			{
				type: 'category',
				axisLine: {
					show: false,//取消坐标轴线
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: '#fff'  //坐标轴文字颜色
					}
				},
				axisTick: {
					show: false,//取消坐标轴刻度线
				},
				data: dateList,--------------data----------------------//
			}
		],
		yAxis: [
			{
				type: 'value',
				name: '出库订单/单',
				nameTextStyle: { color: '#fff' },//坐标轴名称的文字样式。
				min: 0,
				max: cha,//拿到最大值
				position: 'left',
				axisLine: {
					show: false,//坐标轴线
				},
				axisLabel: {
					formatter: '{value}',
					textStyle: {
						color: '#fff'//坐标轴文字颜色
					}
				},
				splitLine: {//设置网格线颜色
					show: true,
					lineStyle: {
						color: '#013066',
						width: 1,
						type: 'dashed'
					}
				}
			},
			{
				type: 'value',
				name: '出库数量',
				nameTextStyle: { color: '#fff' },//坐标轴名称的文字样式。
				min: 0,
				max: cha,//拿到最大值
				position: 'right',
				axisLine: {
					show: false,
					// lineStyle: {
					// 	color: colors[1]
					// }
				},
				axisLabel: {
					formatter: '{value}',
					textStyle: {
						color: '#fff'//坐标轴文字颜色
					}
				},
				splitLine: {//设置网格线颜色
					show: true,
					lineStyle: {
						color: '#013066',
						width: 1,
						type: 'dashed'
					}
				}
			}
		],
		series: [
			{
				name: '出库订单数量',
				type: 'bar',
				barWidth: 40,//柱图宽度
				/*设置柱状图颜色*/
				itemStyle: {
					normal: {
						color: '#69a3ff',
						/*信息显示方式*/
						label: {
							show: true,
							color: '#69A3FF',
							color: '#fff',
							position: 'inside',
							formatter: '{c}'
						}
					}
				},
				data: outOrderNum//数据——————————data
			},

			{
				name: '出库产品数量',
				type: 'line',
				yAxisIndex: 1,
				symbol: 'circle',//设定为实心点
				symbolSize: 10,//拐点大小
				color: '#0080FF',//拐点颜色
				lineStyle: {
					color: '#0080FF',//折线的颜色
				},
				label: {
					show: true,
					color: '#fff'
				},//显示每个折点的数字
				data: outProNum//数据——————————data
			}
		]
	};
	myChart.setOption(option, true);
};
window.onresize = function () {
	setTimeout(function () {
		myChart.resize()
	})
}//resize