### 如何在 ECharts 中设置一个 X 轴值对应多个 Y 轴系列
为了在一个图表中展示同一 X 轴下不同类型的 Y 轴数据，可以利用 `ECharts` 的多 y 轴特性来实现。这涉及到配置多个 yAxis 对象，并为不同的 series 指定对应的 y 轴索引。
#### 配置多项 Y 轴
创建多个 y 轴对象时，可以通过调整各自的位置（left 或 right）、名称、最小最大值范围等参数来自定义每个 y 轴的表现形式[^1]：
```javascript
option = {
xAxis: {type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},
yAxis: [
{name: 'Y Axis 1', type: 'value'},
{name: 'Y Axis 2', type: 'value'}
],
};
```
#### 定义 Series 并关联到特定的 Y 轴
对于每一个要绘制的数据序列 (series)，都需要指明它应该绑定哪一个 y 轴实例。这是通过给 series 添加 `yAxisIndex` 属性完成的，该属性接收整数值表示第几个 y 轴(从0开始计数):
```javascript
series: [
{
name: 'Series A',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210],
yAxisIndex: 0 // 绑定第一个 y 轴
},
{
name: 'Series B',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6],
yAxisIndex: 1 // 绑定第二个 y 轴
}
]
```
#### 整合完整的选项配置
最后一步就是把所有的组件组合起来形成最终的 option 结构体，这样就可以渲染出带有两个独立 y 轴坐标的复合型折线加柱状混合图了[^2]。
```javascript
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: 'Multiple Y-Axis Example'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['Series A','Series B']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis : [
{
type : 'value',
name : 'Value Scale 1'
},
{
type : 'value',
name : 'Value Scale 2',
min: 0,
max: 200,
position: 'right',
offset: 80
}
],
series : [
{
name:'Series A',
type:'line',
data:[120, 132, 101, 134, 90, 230, 210],
yAxisIndex: 0
},
{
name:'Series B',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6],
yAxisIndex: 1
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option);
}
```
本文探讨了在Echarts中如何处理同一个图表显示多个折线图时，出现x坐标与y值不对应的问题。通过详细的数据1和数据2展示，结合实际效果图，解析了解决这类问题的关键步骤和技巧。
最低0.47元/天 解锁文章
扫一扫
9967
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
