echarts双坐标轴
时间: 2023-06-29 20:18:27 浏览: 140
ECharts 可以使用双坐标轴来显示两个不同单位的数据,例如同时显示温度和湿度的变化趋势。
要使用双坐标轴,需要在 option 中设置 xAxis 和 yAxis 分别对应两个坐标轴,然后在 series 中指定使用哪个坐标轴。
以下是一个简单的双坐标轴示例:
```javascript
option = {
xAxis: [
{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value',
name: '温度',
axisLabel: {
formatter: '{value} °C'
}
},
{
type: 'value',
name: '湿度',
axisLabel: {
formatter: '{value} %'
}
}
],
series: [
{
name: '温度',
type: 'line',
data: [11, 11, 15, 13, 12, 13, 10],
yAxisIndex: 0
},
{
name: '湿度',
type: 'line',
data: [60, 65, 62, 68, 70, 75, 72],
yAxisIndex: 1
}
]
};
```
在上面的示例中,我们定义了两个 yAxis,分别对应温度和湿度。然后在 series 中,我们通过 yAxisIndex 属性指定了温度和湿度分别使用哪个坐标轴。
阅读全文
相关推荐

















