首先需要确定两个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);

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐