echarts如何绘制一个x对应多个y的散点图
时间: 2024-02-19 21:57:28 浏览: 166
【JavaScript源代码】Vue导入Echarts实现折线散点图.docx
要绘制一个x对应多个y的散点图,可以使用ECharts的多个系列(series)来实现。每个系列对应一个y轴的数据,所有的系列共享同一个x轴。以下是实现的步骤:
1. 在option中定义x轴的数据,例如:
```
xAxis: {
type: 'category',
data: ['x1', 'x2', 'x3', 'x4', 'x5']
}
```
2. 定义多个y轴的数据,例如:
```
yAxis: [
{
type: 'value'
},
{
type: 'value'
}
],
```
这里定义了两个y轴。
3. 定义多个系列,每个系列对应一个y轴的数据,例如:
```
series: [
{
name: 'series1',
type: 'scatter',
data: [[0, 1], [1, 2], [2, 4], [3, 5], [4, 8]],
yAxisIndex: 0
},
{
name: 'series2',
type: 'scatter',
data: [[0, 2], [1, 3], [2, 5], [3, 6], [4, 9]],
yAxisIndex: 1
}
]
```
这里定义了两个散点图系列,分别对应两个y轴的数据,每个数据点的格式为[x, y],其中x对应x轴的数据,y对应y轴的数据,yAxisIndex表示该系列对应的y轴的索引。
最终的代码如下:
```
option = {
xAxis: {
type: 'category',
data: ['x1', 'x2', 'x3', 'x4', 'x5']
},
yAxis: [
{
type: 'value'
},
{
type: 'value'
}
],
series: [
{
name: 'series1',
type: 'scatter',
data: [[0, 1], [1, 2], [2, 4], [3, 5], [4, 8]],
yAxisIndex: 0
},
{
name: 'series2',
type: 'scatter',
data: [[0, 2], [1, 3], [2, 5], [3, 6], [4, 9]],
yAxisIndex: 1
}
]
};
```
阅读全文