Echarts报表中的legend属性不生效

雾林小妖

于 2025-06-09 06:00:00 发布

阅读量357

点赞数 12

分类专栏：前端基础文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/tangshiyilang/article/details/148404366

版权

前端基础专栏收录该内容

6 篇文章

订阅专栏

1、问题概述？

期望效果，红框中的内容显示出来，但是配置好如下不生效：

legend: {
data: ['Forest', 'Steppe', 'Desert', 'Wetland']
},

2、解决办法和原因

需要配置两处才可以。

第一处：

legend: {
data: ['Forest', 'Steppe', 'Desert', 'Wetland']
},

第二处：

series属性中的name值需要与legend中的data名称相同，如果不同则不显示。

series: [
    {
      name: 'Forest',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390]
    },
    {
      name: 'Steppe',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290]
    },
    {
      name: 'Desert',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190]
    },
    {
      name: 'Wetland',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [98, 77, 101, 99, 40]
    }
  ]