多个图表同时设置双y轴
时间: 2024-09-20 10:11:29 浏览: 30
在ECharts中,如果你需要在一个视图中展示多个独立的图表并且各自都有双Y轴,你需要为每一个图表分别设置。因为ECharts是以独立图表的方式渲染的,所以这种情况下每张图表都需要有自己的配置。下面是一个示例:
```javascript
option = [
{
title: {
text: '图表1 - 双Y轴'
},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: [
{ // 第一个Y轴
name: '数值1'
},
{ // 第二个Y轴
name: '数值2',
axisLine: {
lineStyle: {
color: '#f00' // 红色
}
},
yAxisIndex: 1
}
],
series: [
{
name: '系列1',
type: 'bar',
yAxisIndex: 0,
data: [5, 20, 36, 10, 10]
},
{
name: '系列2',
type: 'line',
yAxisIndex: 1,
data: [8, 4, 12, 6, 9]
}
]
},
{
title: {
text: '图表2 - 双Y轴'
},
xAxis: {
data: ['X1', 'X2', 'X3', 'X4', 'X5']
},
yAxis: [
{ // 图表2的第一根Y轴
name: '数值1'
},
{ // 图表2的第二根Y轴
name: '数值2',
axisLine: {
lineStyle: {
color: '#0f0' // 绿色
}
},
yAxisIndex: 1
}
],
series: [
{
name: '系列1',
type: 'scatter',
yAxisIndex: 0,
data: [[1, 10], [2, 20], [3, 30], [4, 40], [5, 50]]
},
{
name: '系列2',
type: 'pie',
yAxisIndex: 1,
radius: ['50%', '70%'],
data: [{
value: 335,
name: '部分一'
}, {
value: 310,
name: '部分二'
}, {
value: 234,
name: '部分三'
}]
}
]
}
];
```
在这个例子中,每个图表都有各自的双Y轴配置。
阅读全文