echarts系列:echarts折线图中legend中的data是动态加入的不显示,怎么让lengend显示

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 数据中。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值