1.在 ECharts 的 option 中设置多个 Y 轴

在 ECharts 的 option 中，可以通过 yAxis 属性定义多个 Y 轴。需要为每个 Y 轴设置不同的名称、位置和相关样式等属性。例如：

在该代码中，我们定义了2个 Y 轴，其中“销售额”是左侧的 Y 轴，而“利润率”是右侧的 Y 轴。它们分别展示了销售额和利润率两个不同的数据指标，并可以使用 formatter 属性设置 Y 轴标签的格式化方式。

option = {
  yAxis: [
    {
      name: "销售额",
      type: "value",
      position: "left",
      axisLabel: {
        formatter: "{value} 元"
      }
    },
    {
      name: "利润率",
      type: "value",
      position: "right",
      axisLabel: {
        formatter: "{value}"
      }
    }
  ],
  ...
}

2.为不同的数据系列指定 Y 轴

在数据系列中，可以通过 yAxisIndex 属性将不同的数据系列与指定的 Y 轴关联起来。例如：

在该代码中，我们将“销售额”系列与左侧的 Y 轴（即第1个 Y 轴）关联起来，并将“利润率”系列与右侧的 Y 轴（即第2个 Y 轴）关联起来。因此，这两个系列将分别显示在不同的 Y 轴上，方便进行比较。

series: [
  {
    name: "销售额",
    type: "line",
    yAxisIndex: 0,
    data: [20, 40, 60, 80, 100]
  },
  {
    name: "利润率",
    type: "line",
    yAxisIndex: 1,
    data: [10, 20, 30, 40, 50]
  }
  ...
]

3.展示图表并调整样式

最后，需要将图表展示在页面上，并根据实际需求调整相关样式，如 Y 轴的颜色、粗细、网格线等等。例子代码如下：

在该代码中，我们为 Y 轴和网格线设置了样式，以及调整了左侧 Y 轴的位置和样式。可以根据实际需求进行调整。

option = {
  yAxis: [
    {
      name: "销售额",
      type: "value",
      position: "left",
      axisLine: {
        lineStyle: {
          color: "#ccc",
          width: 2
        }
      },
      splitLine: {
        lineStyle: {
          color: "#f5f5f5"
        }
      }
    },
    {
      name: "利润率",
      type: "value",
      position: "right",
      axisLine: {
        lineStyle: {
          color: "#ccc",
          width: 2
        }
      },
      splitLine: {
        lineStyle: {
          color: "#f5f5f5"
        }
      }
    }
  ],
  series: [
    {
      name: "销售额",
      type: "line",
      yAxisIndex: 0,
      data: [20, 40, 60, 80, 100]
    },
    {
      name: "利润率",
      type: "line",
      yAxisIndex: 1,
      data: [10, 20, 30, 40, 50]
    }
  ]
};

const chart = echarts.init(document.getElementById("chart-container"));
chart.setOption(option);