ECharts —— legend设置的data属性不生效

最新推荐文章于 2025-06-09 06:00:00 发布

原创最新推荐文章于 2025-06-09 06:00:00 发布 · 5.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

springboot + vue3 + mybatis 专栏收录该内容

23 篇文章

订阅专栏

本文探讨了ECharts中legend组件动态更新的问题，特别是在下拉框选择改变时如何同步更新legend显示内容。文中提供了具体的错误代码示例，并指出legend的data属性需要与series的name属性保持一致。

当前的背景是想让 legend 显示的内容随着下拉框选择的内容变化，但是设置了data以后，没有生效，legend 反倒不显示了。错误代码如下：

//let legendList = ['左电机', ' 右电机'];        // 这个是下拉框多选的内容
var option = {
  legend: {
    show: true,
    data: legendList,
    textStyle: { color: '#ccc' },
  },
  // ... ...
}

实际上 legend 与下面的 series 是相关联的，这里 legend的data属性出现的名字要和series的name属性对应。

//let legendList = ['左电机', ' 右电机'];        // 这个是下拉框多选的内容
var option = {
  legend: {
    show: true,
    data: legendList,
    textStyle: { color: '#ccc' },
  },
  // ... ...
  series: [
  {
    name: legendList[0],
  },
  {
    name: legendList[1],
  },
}