echarts一个折线图展示多个属性
时间: 2023-06-20 17:10:34 浏览: 137
Echarts实现的折线图
5星 · 资源好评率100%
可以使用 echarts 的多个系列(series)来展示多个属性的折线图。具体步骤如下:
1. 准备数据:为每个属性准备一个数据数组,每个数组包含 x 轴和 y 轴的值。
2. 设置 echarts 配置项,包括图表类型、标题、x 轴和 y 轴等。
3. 为每个属性创建一个系列(series),并设置对应的数据数组和样式等。可以使用 series 数组来创建多个系列。
4. 使用 echarts.setOption() 方法将配置项应用到图表中。
以下是一个简单的示例代码:
```javascript
// 准备数据
const data1 = [[0, 10], [1, 20], [2, 30], [3, 40]];
const data2 = [[0, 20], [1, 30], [2, 40], [3, 50]];
const data3 = [[0, 30], [1, 40], [2, 50], [3, 60]];
// 设置 echarts 配置项
const option = {
title: {
text: '多属性折线图'
},
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D']
},
yAxis: {
type: 'value'
},
series: [
{
name: '属性1',
type: 'line',
data: data1
},
{
name: '属性2',
type: 'line',
data: data2
},
{
name: '属性3',
type: 'line',
data: data3
}
]
};
// 创建图表并显示
const chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);
```
这个示例中展示了三个属性的折线图,每个属性对应一个系列。你可以根据实际需求修改数据和配置项,来创建符合你要求的图表。
阅读全文