首页 前端知识 echarts双Y轴,左右Y轴数据一一对齐

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

2024-06-26 00:06:17 前端知识 前端哥 510 880 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13599.html
标签
评论
发布的文章

JSON、Ajax

2024-07-27 22:07:31

JsonNode、ObjectNode和ArrayNode

2024-07-27 22:07:30

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!