Indicator 指标卡

指标卡 (Indicator) 是用在饼图、玫瑰图以及雷达图等极坐标系下图表中的一种重要组件，它可以展示图表的重点数据信息，让图表更具有信息量和可读性。本教程主要讲解 indicator 的相关概念以及组成，关于 indicator 更加详细的配置及示例，详见配置项文档及示例页面。

组成

指标卡 (Indicator) 主要由以下几个部分组成：

• 标题（Title）：用于展示标卡的主要信息。
• 内容（Content）：用于展示指标卡的详细数据。
• 交互触发器（Trigger）：用于配置指标卡更新的触发方式。

交互

指标卡 (Indicator) 组件提供了交互能力，随着用户 hover/click 的图元不同，指标卡的内容可以动态进行更新。通过配置触发方式，你可以定制指标卡在图表元素被鼠标悬停或点击等操作时的变化。

{
  indicator: {
    trigger: 'hover',
  }
}

示例

带指标卡的饼图

在这个示例中，我们使用了 indicator 配置来实现指标卡组件。现分析这个配置的详细内容：

• visible: true：指标卡可见。
• trigger: 'hover'：指定当鼠标悬停在图表上时更新指标卡数据。
• limitRatio 0.4：指定指标卡宽度占整个饼图宽度的最大比例。
• title 对象：指标卡的标题。其中：
  • visible: true：指定标题可见。
  • autoFit true：指定标题自动适应指标卡宽度。
  • style 对象：配置标题的样。包括字体、颜色等。
  • text 匿名函数：通过动态生成标题文本。
• content 数组：配置指标卡的内容。其中：
  • visible: true：指定内容可见。
  • style 对象：配置内容的样式包括文本内容、字体、颜色等。
  • text 匿名函数：通过数据动态生成内容文本。

通过以上配置，成功实现了一个带指标卡的饼图。以下是饼图实际效果的示例图片：