echarts 横向柱状图可纵向滚动,设置两个y轴时,如何让两个y轴同步滚动
时间: 2024-09-25 15:10:14 浏览: 36
在ECharts中创建横向柱状图并实现两个Y轴的同步滚动,通常需要利用ECharts的`scrollX`和`scrollY`属性以及自定义事件联动功能。首先,你需要设置两个独立的Y轴,并将它们配置为联动:
```javascript
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
scrollX: true,
},
yAxis: [
{ // 第一个Y轴
name: '轴一',
type: 'value',
position: 'left',
},
{ // 第二个Y轴
name: '轴二',
type: 'value',
position: 'right',
link: { // 同步联动配置
target: 'axis1', // 链接到第一个Y轴
},
}],
series: [
{
type: 'bar',
data: [[10, 5], [20, 7], [30, 8], [40, 9], [50, 12], [60, 15], [70, 18], [80, 21], [90, 24], [100, 27]],
yAxisIndex: 0, // 明确指定数据对应哪个Y轴
},
{
type: 'bar',
data: [[11, 6], [21, 8], [31, 9], [41, 11], [51, 13], [61, 16], [71, 19], [81, 22], [91, 25], [101, 28]],
yAxisIndex: 1, // 同理,这里的数据对应第二个Y轴
},
],
};
```
上述代码中,通过`link`选项,我们将第二个Y轴链接到第一个Y轴,当用户滚动其中一个轴时,另一个轴会同步跟随。
阅读全文