Echarts多Y轴实战指南

在Echarts中，多Y轴常常用于展示多个相关度量，以便更好地理解和比较数据。以下我们将深入探讨如何在Echarts中使用多Y轴，并通过实际案例来演示其应用。
一、多Y轴设置
在Echarts中，可以通过设置yAxis属性来定义多Y轴。yAxis是一个数组，每个元素代表一个Y轴。下面是一个简单的示例：

option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: [{
type: 'value',
name: '销售量'
}, {
type: 'value',
name: '库存量'
}],
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
yAxisIndex: 0  // 指定该系列所用的Y轴，0代表第一个Y轴，1代表第二个Y轴
}, {
data: [50, 100, 120, 70, 60, 90, 100],
type: 'bar',
yAxisIndex: 1  // 指定该系列所用的Y轴，0代表第一个Y轴，1代表第二个Y轴
}]
};

在上面的示例中，我们定义了两个Y轴，分别用于展示销售量和库存量。yAxisIndex属性用于指定每个系列所用的Y轴。
二、动态添加多Y轴数据
在实际应用中，我们可能需要动态添加多Y轴数据。这时，我们可以使用Echarts提供的API来动态修改yAxis和series。下面是一个示例：

var myChart = echarts.init(document.getElementById('main'));
var option = {
// ...省略其他配置项...
};
myChart.setOption(option);
// 动态添加多Y轴数据
var newOption = {
yAxis: [{ // 新增一个Y轴
type: 'value',
name: '新销量'
}],
series: [{ // 新增一个系列，并指定使用新Y轴
data: [100, 120, 130, 90, 80, 110, 120],
type: 'bar',
yAxisIndex: 0  // 使用新加的Y轴
}]
};
myChart.setOption(newOption); // 更新图表配置项并重新渲染图表

在上面的示例中，我们首先初始化了一个Echarts图表，并设置了初始配置项。然后，我们通过setOption方法动态添加了一个新的Y轴和一个新的系列，并指定该系列使用新加的Y轴。最后，我们调用setOption方法更新图表配置项并重新渲染图表。这样就可以实现动态添加多Y轴数据的效果。