echarts制作两个纵轴的折线图

本文主要是介绍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, //坐标轴移动50position: '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
}

这篇关于echarts制作两个纵轴的折线图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---