echarts 实现双y轴折线图示例

该示例有如下几个特点：

        ①实现tooltip自定义样式（echarts 实现tooltip提示框样式自定义-CSDN博客）

        ②legend左右区分展示

        ③双y轴折线展示

代码如下：

this.options = {
  grid: {
    left: "3%",
    right: "3%",
    top: "12%",
    bottom: "5%",
    containLabel: true,
  },
  tooltip: {
    show: true,
    trigger: "axis",
    textStyle: {
      align: "left",
    },
    className: "custom-tooltip-box",
    formatter: function (params) {
      return `<div class='custom-tooltip-style'>
        <span>${params[0].name}年</span></br>
        <div class="span">
          <span>${params[0].seriesName}：</span>
          <span>${params[0].value}</span>
        </div>
        <div class="span">
          <span>${params[1].seriesName}：</span>
          <span>${params[1].value}</span>
        </div>
        <div class="span">
          <span>${params[2].seriesName}：</span>
          <span>${params[2].value}</span>
        </div>
      </div>`;
    },
  },
  legend: [
    {
      show: true,
      align: "left",
      left: "5%",
      textStyle: {
        color: "#ffffff",
        fontSize: "13",
      },
      itemWidth: 16,
      itemHeight: 2,
      itemGap: 13,
      icon: "rect",
      data: ["金额(十亿)"],
    },
    {
      show: true,
      align: "left",
      right: "5%",
      textStyle: {
        color: "#ffffff",
        fontSize: "13",
      },
      itemWidth: 16,
      itemHeight: 2,
      itemGap: 13,
      icon: "rect",
      data: ["项(千)", "件(千)"],
    },
  ],
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#355d8d",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#87C2FF66",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        margin: 14,
        fontSize: 12,
        textStyle: {
          color: "#fff", //X轴文字颜色
        },
      },
      data: this.yearList.x,
    },
  ],
  yAxis: [
    {
      type: "value",
      // name: "金额(十亿)",
      min: 0,
      // max: 200,
      nameTextStyle: {
        color: "#FFFFFF99",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#355d8d",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#87C2FF66",
        },
      },
      axisLabel: {
        margin: 14,
        formatter: "{value}",
        textStyle: {
          color: "#FFFFFF99",
        },
      },
    },
    {
      type: "value",
      // name: "项(千)",
      min: 0,
      // max: 200,
      nameTextStyle: {
        color: "#FFFFFF99",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#355d8d",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#87C2FF66",
        },
      },
      axisLabel: {
        margin: 14,
        formatter: "{value}",
        textStyle: {
          color: "#FFFFFF99",
        },
      },
    }
  ],
  series: [
    {
      name: "金额(十亿)",
      type: "line",
      // stack: "总量",
      symbol: "circle",
      showSymbol: false,
      smooth: true,
      // symbolSize: 8,
      itemStyle: {
        normal: {
          color: "#FF7474",
          lineStyle: {
            color: "#FF7474",
            width: 2,
          },
        },
      },
      markPoint: {
        itemStyle: {
          normal: {
            color: "pink",
          },
        },
      },
      yAxisIndex: 0,
      data: this.yearList.money,
    },
    {
      name: "项(千)",
      type: "line",
      // stack: "总量",
      symbol: "circle",
      showSymbol: false,
      smooth: true,
      // symbolSize: 8,
      itemStyle: {
        normal: {
          color: "#FFD029",
          lineStyle: {
            color: "#FFD029",
            width: 2,
          },
        },
      },
      yAxisIndex: 1,
      data: this.yearList.item,
    },
    {
      name: "件(千)",
      type: "line",
      // stack: "总量",
      symbol: "circle",
      showSymbol: false,
      smooth: true,
      // symbolSize: 8,
      itemStyle: {
        normal: {
          color: "#00C2FF",
          lineStyle: {
            color: "#00C2FF",
            width: 2,
          },
        },
      },
      yAxisIndex: 1,
      data: this.yearList.num,
    },
  ],
}

效果图如下：

该示例中的属性可在官网中查阅，若有其他疑问可私信留言互相交流学习~