echarts制作两个纵轴的折线图

在开发过程中，我们经常会遇到两个y轴数据标准不同的情况，而一般情况下echarts只有一个纵轴，这时就要花点心思了。

技术关键： yAxis写成数组，包含自己需要的纵轴； yAxisIndex：纵轴的下标

实现效果：

代码如下：

只截取了重要部分代码。

yAxis: [
        {
				boundaryGap: [0, '50%'],
				type: 'value',
				name: '满足率',
          position: 'left',
          axisLabel: {
						formatter: function(value, index) {
							return value;
						}
					},
					axisTick: {
						inside: 'false',
						length: 10,
					}
        },
        {
          boundaryGap: [0, '50%'],
					type: 'value',
          name: '满足率目标',
          axisLabel: {
						formatter: function(value, index) {
              console.log('val', value)
							return value;
						}
					},
					//offset: 50, //坐标轴移动50
					position: 'right',
					axisTick: {
						inside: 'false',
						length: 10,
					}
				}
      ],
      series: [
        {
					name: '满足率',
					type: 'line',
					data: [],
					yAxisIndex: 0
        },
        {
					name: '满足率目标',
					type: 'line',
					data: [],
					yAxisIndex: 1
				}
      ]

其中有一个要点：多纵轴的情况下，很大概率会导致x轴不均分的情况，如下：

这时只需调整下纵轴的分配即可，

yAxis: [
    {
        name: "单位：(人)",
        type: 'value',
        min:Min1,
        max:Max1,
        splitNumber: 5,
        interval: (Max1 - Min1) / 5
    },
    {
        type: 'value',
        min:Min2,
        max:Max2,
        splitNumber: 5,
        interval: (Max2 - Min2) / 5
    }
]

另外一个坑，如果因为tooltip内容太多导致超出屏幕的时候可以尝试：

echarts tooltip应用的是绝对定位，且overflow属性为hidden。所以超出部分不会展示。

tooltip: {
	confine: true
}