EChart深度解析——揭秘图例中的格式化属性(formatter)和嵌套图表

EChart 图例格式化与嵌套图表：让数据图表更生动、更有内涵

导语：

EChart 是一个强大的可视化库，它提供了一系列丰富的功能，帮助我们创建引人入胜、信息丰富的图表。其中，图例格式化和嵌套图表是两个非常有用的特性，可以显著提升图表的美观性和洞察力。本文将深入探讨这些特性，并提供实用代码示例，帮助你创建更出色的数据图表。

一、EChart 图例格式化：让图例更生动、更有内涵

图例是图表中一个重要的元素，它用于解释图表中不同数据系列的含义。通过使用 EChart 的图例格式化属性（formatter），我们可以自定义图例的显示内容和样式，让其更生动、更有内涵。

1.1 文本格式化

我们可以使用 formatter 函数对图例中的文本进行格式化。例如，我们可以将文本转换为大写、小写或斜体，或者添加其他文本内容：

formatter: function (name) {
  return name.toUpperCase(); // 将文本转换为大写
}

1.2 图标格式化

除了文本，我们还可以对图例中的图标进行格式化。例如，我们可以更改图标的颜色、大小或形状，甚至添加额外的图标：

formatter: function (name) {
  return '<i class="fa fa-circle" style="color: ' + color + '"></i>' + name; // 添加一个带有指定颜色的圆形图标
}

1.3 文本和图标结合格式化

我们还可以结合文本和图标进行格式化，创建更丰富的图例：

formatter: function (name) {
  return '<i class="fa fa-circle" style="color: ' + color + '"></i>' + name + ' (' + value + ')'; // 添加一个圆形图标和数据值
}

二、EChart 嵌套图表：展现数据之间的层级关系

嵌套图表是 EChart 中一种特殊的图表类型，它允许我们将多个图表嵌套在一起，从而展示数据之间的层级关系。这对于展示复杂的数据结构或从多个角度分析数据非常有用。

2.1 嵌套柱状图

嵌套柱状图可以将多个柱状图组合在一个图表中，展示不同层次的数据。例如，我们可以将销售额按产品和区域分组：

series: [
  {
    type: 'bar',
    data: [5, 20, 36, 10, 10] // 第一个数据系列
  },
  {
    type: 'bar',
    data: [12, 14, 17, 23, 28], // 第二个数据系列，与第一个系列嵌套
    yAxisIndex: 1 // 使用不同的 y 轴
  }
]

2.2 嵌套饼图

嵌套饼图可以将多个饼图组合在一起，展示不同层次的数据。例如，我们可以将网站流量按来源和访问类型分组：

series: [
  {
    type: 'pie',
    data: [
      {value: 335, name: '直接访问'},
      {value: 310, name: '邮件营销'},
      {value: 274, name: '联盟广告'},
      {value: 235, name: '视频广告'},
      {value: 400, name: '搜索引擎'}
    ]
  },
  {
    type: 'pie',
    data: [
      {value: 100, name: '直接访问'},
      {value: 90, name: '邮件营销'},
      {value: 80, name: '联盟广告'},
      {value: 60, name: '视频广告'},
      {value: 120, name: '搜索引擎'}
    ],
    radius: ['40%', '60%'] // 设置嵌套饼图的半径
  }
]

2.3 嵌套线图

嵌套线图可以将多个线图组合在一起，展示不同层次的数据。例如，我们可以将收入和利润按时间分组：

series: [
  {
    type: 'line',
    data: [11, 12, 13, 14, 15] // 第一个数据系列
  },
  {
    type: 'line',
    data: [1, 3, 5, 7, 9], // 第二个数据系列，与第一个系列嵌套
    yAxisIndex: 1 // 使用不同的 y 轴
  }
]

结语

EChart 的图例格式化和嵌套图表特性提供了强大的工具，帮助我们创建更具个性化和洞察力的数据图表。通过合理利用这些特性，我们可以让图表更好地传达数据背后的信息，并为用户提供更丰富的交互体验。

常见问题解答

1. 如何在图例中添加背景颜色？

可以使用 itemStyle.color 属性为图例项添加背景颜色：

legend: {
  formatter: function (name) {
    return '<i class="fa fa-circle" style="color: ' + color + '"></i>' + name;
  },
  itemStyle: {
    color: '#ccc' // 设置图例项的背景颜色
  }
}

2. 如何在图例中添加边框？

可以使用 itemStyle.borderWidth 和 itemStyle.borderColor 属性为图例项添加边框：

legend: {
  formatter: function (name) {
    return '<i class="fa fa-circle" style="color: ' + color + '"></i>' + name;
  },
  itemStyle: {
    borderWidth: 2, // 设置边框宽度
    borderColor: '#ccc' // 设置边框颜色
  }
}

3. 如何在嵌套图表中控制子图的位置？

可以使用 left 和 top 属性控制子图在父图表中的位置：

series: [
  {
    type: 'bar',
    data: [5, 20, 36, 10, 10],
    left: '50%' // 设置第一个子图在父图表中左移 50%
  },
  {
    type: 'bar',
    data: [12, 14, 17, 23, 28],
    top: '50%' // 设置第二个子图在父图表中上移 50%
  }
]

4. 如何在嵌套饼图中添加标题？

可以使用 title 属性为嵌套饼图添加

series: [
  {
    type: 'pie',
    data: [
      {value: 335, name: '直接访问'},
      {value: 310, name: '邮件营销'},
      {value: 274, name: '联盟广告'},
      {value: 235, name: '视频广告'},
      {value: 400, name: '搜索引擎'}
    ],
    title: {
      text: '流量来源' // 设置标题文本
    }
  }
]

5. 如何在嵌套线图中添加阴影？

可以使用 areaStyle.shadowBlur 和 areaStyle.shadowColor 属性为嵌套线图中的面积添加阴影：

series: [
  {
    type: 'line',
    data: [11, 12, 13, 14, 15],
    areaStyle: {
      shadowBlur: 10, // 设置阴影模糊度
      shadowColor: 'rgba(0, 0, 0, 0.3)' // 设置阴影颜色
    }
  }
]