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);