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

阳光穿透心脏的1/2处 2021-09-16 19:52 487阅读 0赞

# 一、问题 #

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]

# 二、经过 #

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

# 三、结果 #

> 如图：

![在这里插入图片描述][20181031144819915.png]

> 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数据，也是动态添的

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]: /images/20210724/79ab499f87a44680aeb915c02900acb2.png
[20181031144819915.png]: /images/20210724/cf667616b8c84ff6ad1340bd2b78bc00.png