echarts折线图中legend中的data是动态加入的不显示,怎么让lengend显示
在 ECharts 中,如果你想让 legend 显示动态加入的数据,你可以通过调用 setOption
方法来更新配置项。
以下是一个示例代码,演示如何在 ECharts 中动态添加数据到 legend 并使其显示:
var chart = echarts.init(document.getElementById('chart'));
// 初始数据
var initialLegendData = ['Data1', 'Data2'];
// 初始图表配置
var option = {
legend: {
data: initialLegendData
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name: initialLegendData[0],
type: 'line',
data: [120, 200, 150, 80, 70, 110, 130]
}]
};
// 初始化图表
chart.setOption(option);
// 动态添加数据
var newData = 'New Data';
legendData.push(newData);
// 更新配置项
option.legend.data.push(newData);
chart.setOption(option);
在这个示例代码中,我们首先初始化了图表,并设置了初始的 legend 数据。然后,我们通过调用 setOption
方法来更新配置项,将新数据添加到 legend 中并使其显示。注意,setOption
方法会合并新的配置项到已有的配置项中,所以我们需要确保新数据正确地添加到 legend 数据中。