ECharts 多条坐标轴轴线,合并为一条线

一、问题

2条y轴,y轴的坐标轴轴线axisLine太多,扰人视线,如图

在这里插入图片描述

二、经过

刚开始用分割线(yAxis.splitLine)做出来的这个效果。
后期,改为两条线合并为一条。
网上找一个没有关于splitLine的设置,查找ECharts,发现一种方法:通过yAxis.axisLine轴线,及yAxis.max、yAxis.interval、yAxis.splitNumber手动控制y轴的最大值、轴线的刻度间隔、分割段数来整合。

三、结果

如图:

在这里插入图片描述

code:

// 把2个y轴需要的数值,动态存为数组--项目中数组是从后台取得数据,动态添加的,此处直接写出来,方便操作
 var eChartYaxis0 = ["208.153", "194.690", "192.156"];
 var eChartYaxis1 = ["2.6", "2.4", "1.3"];
 // y轴--计算
 var max0 = +eChartYAxis0[0] ? +eChartYAxis0[0] : 0
 for (let i = 0, len = eChartYAxis0.length; i < len; i++) {
	let curVal = +eChartYAxis0[i] ? +eChartYAxis0[i] : 0
	if (curVal > max0) {
    	max0 = curVal
    }	
 }
 var max1 = +eChartYAxis1[0] ? +eChartYAxis1[0] : 0
 for (let i = 0, len = eChartYAxis1.length; i < len; i++) {
	let curVal = +eChartYAxis1[i] ? +eChartYAxis1[i] : 0
	if (curVal > max1) {
    	max1 = curVal
    }	
 }
 if (max0 === 0) {
 	max0 = 10
 } else {
	max0 = Math.ceil(max0 / 10) * 10
 }
 if (max1 === 0) {
 	max1 = 10
 } else {
	max1 = Math.ceil(max1 / 10) * 10
 }
 var splitNumber = 5
 var interVal0 = max0 / splitNumber
 var interVal1 = max1 / splitNumber
// ECharts -- setOption
GDPOption.yAxis[0].max = max0
GDPOption.yAxis[1].max = max0
GDPOption.yAxis[0].interval = interval0
GDPOption.yAxis[1].interval = interval1
GDPOption.yAxis[0].splitNumber = splitNumber
GDPOption.yAxis[1].splitNumber  = splitNumber

上图,完整的option,如下

 // 在这里插入代码片
 let GDPOption = {
	color: ['#004a79', '#007879'], // 设置图表主色调
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow'
		}
	},
	grid: {
		left: '3%',
		right: '3%',
		bottom: '3%',
		containLabel: true
	},
	xAxis: {
		type: 'category',
		data: [],
		axisLine: {
			lineStyle: {
				color: '#ccc'
			}
		},
		axisTick: {
			show: true,
			alignWithLabel: true
		}
	},
	yAxis: [
		{
			type: 'value',
			position: 'left',
			axisLine: {
				lineStyle: {
					color: '#ccc'
				}
			},
			axisTick: {
				show: false
			}
		},
		{
			type: 'value',
			position: 'right',
			offset: 0,
			axisLine: {
				lineStyle: {color: '#d9d9d9'}
			},
			axisTick: {
				show: false
			}
		}
	],
	series: [
		{
			data: ["208.153", "194.690", "192.156"],
			barWidth: '24px',
			type: 'bar'
		},{
			data: ["2.6", "2.4", "1.3"],
			yAxisIndex: 1,
			type: 'line'
		}
	]
}

四、特别提示

GDPOption .series中的data数据,也是动态添的

猜你喜欢

转载自blog.csdn.net/yan263364/article/details/83584701