echarts展示折线图, series中三个集合data相同,展示缺不在同一点位
时间: 2024-09-12 10:14:25 浏览: 33
在ECharts中,如果你想让三个系列在同一x轴下展示,并且他们的数据点位置不同,可以使用`stack`属性和`offset`属性来实现。`stack`属性用于分堆,当值相同时,它们会堆积在一起,然后你可以通过`offset`属性调整每个系列的位置。这里是一个简单的示例:
```javascript
option = {
xAxis: {
data: ['时间点1', '时间点2', '时间点3', '时间点4', '时间点5']
},
yAxis: {},
series: [
{
name: 'Series A',
type: 'line',
stack: '总量', // 分成一个堆
data: [10, 20, 30, 40, 50],
offset: 0 // 默认从零开始,偏移量为0
},
{
name: 'Series B',
type: 'line',
stack: '总量',
data: [15, 25, 35, 45, 55],
offset: 80 // 设置偏移量,使其偏移到右侧
},
{
name: 'Series C',
type: 'line',
stack: '总量',
data: [12, 22, 32, 42, 52],
offset: -40 // 设置负偏移量,使其偏移到左侧
}
]
};
echarts.init(document.getElementById('main')).setOption(option);
```
在这个例子中,所有的系列共享相同的x轴数据,但是由于设置了不同的`offset`值,他们在y轴上的位置会分开。
阅读全文