动态添加Echarts折线图分类
时间: 2023-09-23 21:12:30 浏览: 89
可以使用Echarts提供的`setOption`方法来动态添加折线图分类。以下是一个简单的示例:
```javascript
// 初始化Echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 设置初始数据
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
// 使用setOption方法设置初始数据
myChart.setOption(option);
// 动态添加折线图分类
function addCategory(categoryName, data) {
// 获取当前option配置
var currentOption = myChart.getOption();
// 将新的分类添加到xAxis.data中
currentOption.xAxis[0].data.push(categoryName);
// 添加新的数据系列
currentOption.series.push({
name: categoryName,
type: 'line',
data: data
});
// 使用setOption方法更新配置
myChart.setOption(currentOption);
}
// 示例用法
addCategory('New Category', [120, 200, 150, 80, 70, 110, 130]);
```
在上述示例中,我们首先使用`setOption`方法设置了初始的折线图数据。然后,我们定义了一个`addCategory`函数,该函数接受一个分类名称和该分类的数据数组作为参数。在函数内部,我们首先使用`getOption`方法获取当前的Echarts配置,然后将新的分类名称添加到xAxis.data中,再添加一个新的数据系列到series数组中。最后,我们使用`setOption`方法更新Echarts实例的配置。
阅读全文