echarts双Y轴,左右Y轴数据一一对齐

 首先需要确定两个Y轴的最大值;如果根据左侧/右侧Y轴绘制多条线需要合并数组之后进行取最大值。

function calMax(arr) {  // 取最大值方法
		var max = arr[0];
		for (var i = 1; i < arr.length; i++) { // 求出一组数组中的最大值
			if (max < arr[i]) {
				max = arr[i];
			}
		}
		var maxint = Math.ceil(max / 10); // 向上取整
		var maxval = maxint * 10; // 最终设置的最大值
		return maxval; // 输出最大值
	}
	var appregnum = [102, 200, 300, 400, 800, 600, 700, 800, 900, 1000, 1100, 2000,102, 200, 300, 400, 800, 600, 700, 800, 900, 1000, 1100, 1600,102, 200, 300, 400, 800, 600, 700, 800, 900, 1000, 1100, 1600,102, 200, 300, 400, 800, 600, 700, 800, 900, 1000, 1100, 1600,102, 200, 300, 400, 800, 600, 700, 800, 900, 1000, 1100, 1600,102, 200, 300, 400, 800, 600, 700, 800, 900, 1000, 1100, 1600,102, 200, 300, 400, 800, 600, 700, 800, 900, 1000, 1100, 1600,102, 200, 300, 400, 800, 600, 700, 800, 900, 1000, 1100, 1600,];
	// var appregnum = hdata_;
	var activenum = [1.1, 2.2, 3.3, 4.4, 5.5, 6.6, 7.7, 8.8, 9.9, 10.1, 20.4, 30.5,1.1, 2.2, 3.3, 4.4, 5.5, 6.6, 7.7, 8.8, 9.9, 10.1, 20.4, 30.5,1.1, 2.2, 3.3, 4.4, 5.5, 6.6, 7.7, 8.8, 9.9, 10.1, 20.4, 30.5,1.1, 2.2, 3.3, 4.4, 5.5, 6.6, 7.7, 8.8, 9.9, 10.1, 20.4, 30.5,1.1, 2.2, 3.3, 4.4, 5.5, 6.6, 7.7, 8.8, 9.9, 10.1, 20.4, 30.5,1.1, 2.2, 3.3, 4.4, 5.5, 6.6, 7.7, 8.8, 9.9, 10.1, 20.4, 30.5,1.1, 2.2, 3.3, 4.4, 5.5, 6.6, 7.7, 8.8, 9.9, 10.1, 20.4, 30.5,1.1, 2.2, 3.3, 4.4, 5.5, 6.6, 7.7, 8.8, 9.9, 10.1, 20.4, 30.5,];
	// var activenum = data.activenum;
	var maxappreg = calMax(appregnum); //左侧Y轴值
	var maxactive = calMax(activenum); //右侧Y轴值
	var interval_left = maxappreg / 5; //左轴间隔
	var interval_right = maxactive / 5; //右轴间隔

然后在option中确定yAxis的两个Y轴对象

yAxis : [{
			type : 'value',
			// min : miniVal,
			max : maxappreg,
			// splitNumber : 20,// Y轴间隔
			axisTick: {show:true},
			axisLine : {
				show:true,
				onZero : true,
				lineStyle : {
					color : '#B3E6FC'
				},
			},
			splitLine : {
				show : true,
				lineStyle:{
					color: ['#315070'],
				}
			// 显示y网格线
			},
			interval: interval_left,
			splitNumber: 5, //设置坐标轴分割段数
		},{
			type: "value",
			name: '温度(℃)',
			axisLine : {
				show:true,
				onZero : true,
				lineStyle : {
					color : '#B3E6FC'
				},
			},
            splitLine : {
				show : true,
				lineStyle:{
					color: ['#315070'],
				}
				// 显示y网格线
			},
			max: maxactive,
			interval: interval_right,
			splitNumber: 5, //设置坐标轴分割段数
		}],

最后配置series

var serY1 = {
            name: paramName, // 名称在请求回来的数据里获取
            type: 'line', // 曲线
            smooth: true, // 曲线平滑处理
            symbolSize: 1, /*折线节点大小*/
            lineStyle: {normal: {width: 1.5/*线宽*/}},
            data: paramData, // 数据
        };
// 右侧Y轴
var serY2 = {
            name: paramName, // 名称在请求回来的数据里获取
            type: 'line', // 曲线
            smooth: true, // 曲线平滑处理
            symbolSize: 1, /*折线节点大小*/
            lineStyle: {normal: {width: 1.5/*线宽*/}},
            data: paramData, // 数据
            yAxisIndex: 1,  // 设定为右侧Y轴
        };
series.push(serY1,serY2);

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值