环形饼图

环形饼图是饼图的一种，与基本饼图相比，环形饼图是另一种展示方式，文本标签在环形的中央显示，支持自定义文本及样式。

属性

基础

• 组件标题： 用于在图层中显示组件的名称。1.1+

• 组件尺寸： 组件的宽度和高度，单位为px。

• 组件位置： 组件在大屏中的位置，通过横纵坐标来定义，单位为px。

• 背景颜色： 组件的背景颜色。

• 系列颜色： 扇区的颜色。默认情况下图表扇区的颜色为主题的颜色。

  

• 基础样式 同 饼图属性 -> 基础样式 3.0+

系列

• 系列名称： 用于提示框的显示。

  

• 南丁格尔玫瑰图模式： 是否展示成南丁格尔图，通过半径区分数据大小。

  • 是： 南丁格尔玫瑰图。

  • 否： 普通饼图。

  • 半径： 扇区圆心角展现数据的百分比，半径展现数据的大小。

  • 面积： 所有扇区圆心角相同，仅通过半径展现数据大小。

    

• 选择模式： 是否支持多个选中。

• 圆心坐标： 环形饼图的中心(圆心)坐标。可为px和%。

• 饼图半径： 环形饼图的半径。

  • 内半径： 内半径设大将显示成圆环形。

  • 外半径： 外圈半径。

  • 起始角度： 开始角度。

  • 最小角度： 最小的扇区角度，用于防止某个值过小导致扇区太小影响交互。

    

• 普通状态样式：

  • 文本标签： 指环形饼图图形上的文本标签，可用于说明图形的一些数据信息，例如值、名称等。

    • 显示： 是否显示文本。

    • 内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。

      字符串模板变量

      • {a} : 系列名。

      • {b} : 数据名。

      • {c} : 数据值。

      • {d}: 百分比。

        示例：

        {b}: {d}
        

      回调函数

      可用参数为data。

      示例：

      return data.name;
      

      参数 data是 内容格式器需要的单个数据资源。格式如下：

      {
          // 数据名，类目名
          name: string,
          // 传入的原始数据项
          data: Object,
          // 传入的数据值
          value: number|Array,
          // 百分比
          percent: number
      }
      

    • 字体颜色： 文本标签字体颜色。

    • 字体大小： 文本标签字体大小。

    • 字体粗细： 文本标签字体粗细。

    • 字体： 文本标签字体样式。

      

  • 图形样式

    • 渐变色： 是否添加渐变色。

    • 是：

      • 渐变色方向： 渐变色的方向，可为正下到正上，左下到右上，右上到左下。

      • 渐变色范围设置： 设置渐变色的颜色范围。

    • 否：

      • 颜色： 控制扇区的颜色。

    • 描边颜色： 图形描边颜色。

    • 描边线宽： 图形描边宽度。

    • 描边类型： 图形描边类型。

• 高亮状态样式： 鼠标放到扇区上时高亮的扇区和样式。其属性配置与普通状态样式相同。

• 初始动画： 对组件动画的配置。

  • 开启动画： 组件是否启用动画。

  • 动画时长(ms)： 动画的时长。

  • 缓动效果： 动画的缓动效果。

• 数据映射： 同 饼图属性 -> 系列 -> 数据映射 。3.0+

标题

• 显示标题： 是否显示标题

• 内容：

• 标题

  • 主： 主标题内容。
  • 副： 副标题内容。
  • 超链接
    • 主： 主标题超链接。
    • 副： 副标题超链接。

• 位置

  • 水平对齐
  • 垂直对齐

• 外观

• 内边距

• 主副间隔

• 主标题文本样式

  • 字体颜色： 主标题字体颜色。

  • 字体大小： 主标题字体大小。

  • 字体粗细： 主标题字体粗细。

  • 字体： 主标题字体样式。

• 副标题文本样式

  • 字体颜色： 副标题字体颜色。

  • 字体大小： 副标题字体大小。

  • 字体粗细： 副标题字体粗细。

  • 字体： 副标题字体样式。

图例 3.0+

• 属性同 饼图属性 -> 图例。

提示框

• 显示提示框： 是否显示提示框。

• 提示模板 ：提示框浮层内容格式器，支持字符串模板和回调函数两种形式。

  • 字符串模板

    模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在触发点为坐标轴的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

    • 折线（区域）图、柱状（条形）图、K 线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
    • 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
    • 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
    • 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

  • 回调函数

    return data;
    

• 触发点：

  • 坐标轴： 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。

  • 数据项： 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。

• 提示外观

  • 背景颜色： 提示框浮层的背景颜色。

  • 边框颜色： 提示框浮层的边框颜色。

  • 边框宽度： 提示框浮层的边框宽。

  • 内边距： 提示框浮层内边距

• 文本样式

  • 字体颜色： 提示框字体颜色。

  • 字体大小： 提示框字体大小。

  • 字体粗细： 提示框字体粗细。

  • 字体： 提示框字体样式。

工具栏

• 显示工具栏： 是否显示工具栏。

• 功能按钮

  • 保存为图片按钮

  • 还原按钮

  • 数据视图按钮

• 位置朝向

  • 排列方式： 图例列表的布局朝向。

  • 水平位置： 水平排列。

  • 垂直位置： 垂直排列。

• 图表尺寸

  • 图标大小
  • 间隔

时间轴 3.0+

• 属性同 饼图属性 -> 时间轴 。

数据

静态数据

上图中的示例JSON代码如下：

[
  {
    "x": "类型一",
    "y": 33
  },
  {
    "x": "类型二",
    "y": 12
  },
  {
    "x": "类型三",
    "y": 27
  },
  {
    "x": "类型四",
    "y": 23
  },
  {
    "x": "类型五",
    "y": 40
  }
]

• x： 维度，各扇形的类目。
• y： 量度，各扇形的值，决定各扇形占整个环形饼图的百分比。

环形饼图中需要单维度、单量度的数据，所以横轴、纵轴中只解析拖入的第一个字段，多余字段在图表中不解析。

数据资源

警告：

拖动到纵轴的字段为量度---> 数值类型。即在数据资源--->维度/量度列表中格式化为整型或浮点型。

交互

扇区选中事件

勾选启用，开启扇区选中事件。当单击环形饼图的扇区时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。

扇区悬停事件 3.0+

勾选启用，开启扇区悬停事件。当悬停环形饼图的扇区时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。

扇区移出事件 3.0+

勾选启用，开启扇区移出事件。当移出环形饼图的扇区时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。

数据响应

环形饼图支持数据响应配置。

数据上卷、下钻

环形饼图支持数据上卷、下钻功能。

节点编程

详见饼图节点编程