echarts柱状图和折线图混合Y轴左右刻度位置不一致
时间: 2023-07-22 13:17:32 浏览: 260
Echarts 柱状图和折线图
5星 · 资源好评率100%
可以通过设置 `yAxisIndex` 属性来实现混合图表 Y 轴左右刻度位置不一致的效果。
例如,将柱状图的 Y 轴放在左侧,折线图的 Y 轴放在右侧,可以这样设置:
```javascript
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: [
{
type: 'value',
position: 'left', // 左侧 Y 轴
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
position: 'right', // 右侧 Y 轴
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: '蒸发量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6],
yAxisIndex: 0 // 指定使用左侧 Y 轴
},
{
name: '平均温度',
type: 'line',
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3],
yAxisIndex: 1 // 指定使用右侧 Y 轴
}
]
};
```
以上代码中,柱状图的 `yAxisIndex` 属性被设置为 `0`,指定了使用左侧的 Y 轴,而折线图的 `yAxisIndex` 属性被设置为 `1`,指定了使用右侧的 Y 轴。这样就可以实现混合图表 Y 轴左右刻度位置不一致的效果。
阅读全文