开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第29天，点击查看活动详情

写在前面

本篇文章中介绍使用echarts画双y轴图表并解决分割线对齐问题。

画双y轴图表

使用echarts画双y轴图表的关键是设置yAxis为一个数组[]，数组中的每一个对象表示一个y轴，下面是一个简单的双坐标轴的例子，每个字段表示的意思都注释的很清楚：

此时会发现双y轴的分割线是混乱的，这样肯定是过不了设计那关的，下面就是对应的解决方法。

      let option = {
        color: ['#00E4FE', '#FFD700'],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: ["0h", "04h", "08h", "12h", "16h", "20h", "24h"],
          boundaryGap: false, // x轴两边是否留白
          // 坐标轴轴线
          axisLine: {
            lineStyle: {
              color: '#fff',
              opacity: 0.6
            }
          },
          // 坐标轴刻度
          axisTick: {
            show: false
          },
          // 坐标轴文本
          axisLabel: {
            show: true,
            color: "rgba(255, 255, 255, 0.6)"
          }
        },
        yAxis: [{
          // 坐标轴分割线
          splitLine: {
            lineStyle: {
              color: ['#fff'],
              opacity: 0.1
            }
          },
          // 坐标轴文本
          axisLabel: {
            show: true,
            color: "rgba(255, 255, 255, 0.6)"
          },
          name: "mg/L",
          nameTextStyle: {
            color: "#FFFFFF",
            opacity: 0.6,
          },
        }, {
          // 坐标轴分割线
          splitLine: {
            lineStyle: {
              color: ['#fff'],
              opacity: 0.1
            }
          },
          // 坐标轴文本
          axisLabel: {
            show: true,
            color: "rgba(255, 255, 255, 0.6)"
          },
        }],
        grid: {
          top: '12%',
          left: '12%',
          right: '26px',
          bottom: '14%'
        },
        series: [
          {
            name: '余氯',
            type: 'line',
            data: [0.48, 0.56, 0.50, 0.56, 0.60, 0.56, 0.48],
            showSymbol: false,
            smooth: true,
          },
          {
            name: 'ph',
            type: 'line',
            data: [7.1, 7.3, 7.5, 7.3, 7.0, 7.29, 7.51],
            showSymbol: false,
            smooth: true,
            yAxisIndex: 1,
          },
        ]
      };

分割线对齐问题解决方法

在上面的例子里添加如下代码：

        yAxis: [{
          ...
          min: 0,
          max: 1.5,
          interval: 1.5 / 5
        }, {
          ...
          min: 3,
          max: 8,
          interval: 5 / 5
        }],

此时图表就正常了：

所以解决办法就是加上字段min，max，interval，其中min是y轴的最小值，max是y轴的最大值，interval是y轴每个分割的长度，在上面，我都用max-min的值除以5，意思就是将两个y轴都分割成5份，每份的长度就是max-min的值除以5，这里分割的时候要注意，interval会取不同的小数点，所以最好max-min/5的值得小数位数和max的小数位数一样或更精确。

写在最后

以上就是使用echarts画双y轴图表并解决分割线对齐问题的所有代码和说明