深入解析 echarts 的 legend

发布时间：2023-05-20

一、legend 概述

echarts 的 legend 组件用于展示数据系列的信息，常用于多系列展示的图表中。通过 legend，用户可以方便地选择需要呈现的数据系列。 在 echarts 中，legend 可以设置其位置、方向、显示内容等属性，并且支持对单一系列的 legend 进行个性化设置，也支持通过点击 legend 上的某一项来隐藏或显示对应的数据系列。

二、legend 的基本属性

在 echarts 中，我们可以通过 option 对象的 legend 属性来配置 legend 的基本属性。下面是一个示例：

option = {
  legend: {
    data: ['数据系列1', '数据系列2', '数据系列3'],
    orient: 'horizontal',
    left: 'center',
  },
  series: [
    {
      name: '数据系列1',
      type: 'line',
      data: [10, 20, 30, 40, 50],
    },
    {
      name: '数据系列2',
      type: 'line',
      data: [20, 40, 60, 80, 100],
    },
    {
      name: '数据系列3',
      type: 'line',
      data: [5, 15, 25, 35, 45],
    },
  ],
}

上述代码中，legend 的基本属性包括：

  1. data：一个包含 legend 数据的数组，即每个数据系列的名称。
  2. orient：legend 的排布方向，支持 horizontal（水平）和 vertical（垂直）。
  3. left/top/right/bottom：legend 相对于画布的左/上/右/下距离。

三、单一系列的 legend 个性化设置

有时候，我们需要针对某个数据系列设置特定的 legend 样式。对于单一系列的个性化设置，echarts 提供了 itemStyle 属性来实现。下面是一个示例：

option = {
  legend: {
    data: ['数据系列1', '数据系列2', '数据系列3'],
  },
  series: [
    {
      name: '数据系列1',
      type: 'line',
      data: [10, 20, 30, 40, 50],
      itemStyle: {
        color: 'red',
      },
    },
    {
      name: '数据系列2',
      type: 'line',
      data: [20, 40, 60, 80, 100],
    },
    {
      name: '数据系列3',
      type: 'line',
      data: [5, 15, 25, 35, 45],
    },
  ],
}

上述代码中，我们针对数据系列1设置了 itemStyle: {color: 'red'}，表示在 legend 中，数据系列1 的样式为红色。

四、点击 legend 实现数据系列的隐藏和显示

除了展示数据系列的信息外，legend 还可以用于控制数据系列的隐藏和显示。我们可以通过设置 series 类型为 'line' 或 'bar' 等可进行隐藏和显示的类型，然后设置 legend 的 selectedMode: 'single' 或 selectedMode: 'multiple' 来切换对应的隐藏和显示模式。例如：

option = {
  legend: {
    data: ['数据系列1', '数据系列2', '数据系列3'],
    selectedMode: 'multiple',
  },
  series: [
    {
      name: '数据系列1',
      type: 'line',
      data: [10, 20, 30, 40, 50],
    },
    {
      name: '数据系列2',
      type: 'line',
      data: [20, 40, 60, 80, 100],
    },
    {
      name: '数据系列3',
      type: 'line',
      data: [5, 15, 25, 35, 45],
      // 设置为false表示默认不显示该数据系列
      // 但是点击legend可以进行显示与隐藏
      show: false,
    },
  ],
}

上述代码中，我们针对数据系列3设置了 show: false，表示该数据系列默认不显示。通过设置 selectedMode 为 multiple，用户可以在 legend 中勾选多个数据系列进行同时显示，与单击某一系列的 legend 来显示该系列的方法类似。

五、legend 的高级属性

除了上述基本属性外，echarts 的 legend 还有一些高级属性可用于进一步控制其样式和行为。下面是一些常见的高级属性：

  • textStyle：legend 的字体样式
  • formatter：legend 的文本内容格式化器
  • selected：设置每个数据系列的显示状态，可用于默认隐藏某些系列
  • inactiveColor：设置未被选中的数据系列的字体颜色
  • padding：设置 legend 内容的内边距
  • itemGap：设置 legend 中每个数据系列之间的间距 我们可以在 option 对象的 legend 属性中自定义这些高级属性。例如：
option = {
  legend: {
    data: ['数据系列1', '数据系列2', '数据系列3'],
    textStyle: {
      fontSize: 14,
      fontWeight: 'bold',
      color: '#333',
    },
    formatter: '{name}',
    padding: [10, 0],
    itemGap: 20,
  },
  series: [
    {
      name: '数据系列1',
      type: 'line',
      data: [10, 20, 30, 40, 50],
    },
    {
      name: '数据系列2',
      type: 'line',
      data: [20, 40, 60, 80, 100],
    },
    {
      name: '数据系列3',
      type: 'line',
      data: [5, 15, 25, 35, 45],
      // 默认隐藏该数据系列
      show: false,
      // 未被选中时字体的颜色
      inactiveColor: 'gray',
    },
  ],
}

上述代码中，我们自定义了 textStyle、formatter、padding、itemGap 和 inactiveColor 等 legend 属性。

六、总结

本文深入解析了 echarts 的 legend 组件，从基本属性、单一系列的个性化设置、点击 legend 实现数据系列的隐藏和显示以及高级属性等多个方面进行了详细阐述。希望本文可以帮助读者更好地理解和使用 echarts 的 legend 组件。

推荐文章