echart折线图增加图列
时间: 2024-03-18 09:37:35 浏览: 137
在ECharts中,要给折线图增加图例,可以设置series中的name属性来实现。下面是一个简单的示例代码:
```javascript
// 引入ECharts库
import echarts from 'echarts';
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 定义数据
var data = {
categories: ['一月', '二月', '三月', '四月', '五月'],
series: [
{
name: '数据1',
data: [120, 200, 150, 80, 70]
},
{
name: '数据2',
data: [90, 150, 200, 120, 100]
}
]
};
// 配置选项
var = {
legend: {
data: data.series.map(item => item.name) // 设置图例的数据
},
xAxis: {
type: 'category',
data: data.categories
},
yAxis: {
type: 'value'
},
series: data.series.map(item => ({
name: item.name,
type: 'line',
data: item.data
}))
};
// 使用配置项显示图表
myChart.setOption(option);
```
在上面的代码中,通过设置legend.data属性来指定图例的数据,其中data属性的值是一个数组,包含了每个系列的名称。然后在series中,通过设置name属性来指定每个系列的名称,这样就能实现折线图增加图例。
阅读全文
相关推荐















