echarts两个y轴,如何保证y轴刻度与数据相对应
时间: 2023-12-25 15:05:59 浏览: 137
实现ECharts双Y轴左右刻度线一致的例子
5星 · 资源好评率100%
在 ECharts 中,可以通过使用 `grid` 和 `yAxis` 属性来创建多个 y 轴。为了保证 y 轴刻度与数据相对应,可以通过设置 `yAxis` 的 `min` 和 `max` 属性来手动设定 y 轴的取值范围。这样可以确保 y 轴的刻度与数据一一对应。
例如,如果有两个 y 轴,我们可以分别设置它们的取值范围:
```javascript
option = {
grid: [
{
left: '10%',
right: '10%',
bottom: 30
}
],
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value',
name: 'y1',
axisLabel: {
formatter: '{value}'
},
min: 0,
max: 100
},
{
type: 'value',
name: 'y2',
axisLabel: {
formatter: '{value}'
},
min: 0,
max: 1000
}
],
series: [
{
name:'series1',
type:'bar',
data:[12, 24, 36, 48, 60, 72, 84],
yAxisIndex: 0
},
{
name:'series2',
type:'line',
data:[120, 240, 360, 480, 600, 720, 840],
yAxisIndex: 1
}
]
};
```
在上面的例子中,我们创建了一个柱状图和一条折线图,分别对应两个 y 轴。在 `yAxis` 中,我们手动设置了两个 y 轴的取值范围,确保了它们的刻度与对应的数据一一对应。
阅读全文