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