跳至主要內容

环形旭日图

2025年1月14日大约 1 分钟

环形旭日图

通过设置内外半径的参数,达到环形旭日图的效果。

属性

  • 组件标题: 用于在图层和节点编程中显示组件的名称。修改后在图层和节点编程中搜索组件时按照新标题进行搜索。1.1+

  • 组件尺寸: 组件的宽度和高度,单位为px

    • 锁定纵横比::单击切换是否锁定纵横比,锁定时调整组件尺寸保持其宽度与高度的比例不变。 2024.3+
  • 组件位置: 组件在大屏中的位置,包括组件的横坐标和纵坐标,单位为px。横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。

  • 隐藏时解析: 默认组件设置隐藏后组件不解析,组件配置的数据资源及交互事件,节点编程事件都不会执行。当开启隐藏时解析时,上述功能将执行。

    提示

    隐藏时解析常用于页面中不需要展示组件但要获取相关数据。

  • 系列颜色: 不同层级的颜色。第一项表示数据下钻后返回上级的图形颜色,其后的每一项分别表示从圆心向外层的图形颜色。

系列

  • 系列名称: 设置系列的名称,用于提示框的显示和下钻后返回上级的文本。开启后,点击节点会以该节点为根节点重新渲染旭日图,实现数据下钻。在下钻后,图表中心会显示一个返回上级节点的按钮。

  • 点击节点行为: 设置点击节点后的行为,支持数据下钻功能。

  • 排序: 设置扇形块的排序方式,可选 降序升序不排序

  • 坐标半径

    • X 坐标: 设置旭日图的中心横坐标。

    • Y 坐标: 设置旭日图的中心纵坐标。

    • 内半径: 设置旭日图的内半径。

    • 外半径: 设置旭日图的外半径。

  • 普通状态

    • 文本标签: 设置图形上的文本标签,可用于说明图形的一些数据信息,例如值、名称等。

      • 显示: 设置是否显示图形上的文本标签,其余配置均在显示标签时生效。

      • 内容格式器: 设置文本标签显示内容。支持 字符串模板回调函数 两种形式。字符串模板可直接使用 enter 按键进行换行,回调函数返回的字符串可以用 \n 换行,支持从 HETU 内置函数中获取变量值。2024.5+

        • 打开编辑框: 点击输入框中打开编辑器,可在编辑器中修改内容。

        • 字符串模板变量:

          • {a} : 系列名。

          • {b} : 数据名。

          • {c} : 数据值。

          • {d}: 百分比。

        示例:

        {b}: {d}
        • 回调函数: 可直接输入函数体,系统提供了两个参数 dataHETU

          • 参数 data 是内容格式器需要的单个数据资源。格式如下:
        {
            // 数据名,类目名
            name: string,
            // 传入的原始数据项
            data: Object,
            // 传入的数据值
            value: number|Array,
        }

        示例:

        return data.name;
        • 参数 HETU 是系统内置函数。可获取 变量池 中的变量值。
      • 位置: 设置文本标签上值的位置。可选 内左内右内上内下内左上内左下内右上内右下

      • 文字距离: 设置文本标签与图形之间距离。

      • 文字旋转: 设置文本标签旋转指定角度。值为 -90 度到 90 度,正值是逆时针。

      • 文字偏移: 设置文本标签水平和垂直偏移量,第一个输入框为水平偏移量,第二个输入框为垂直偏移量。

        • 水平偏移: 设置文本标签的水平偏移,值为正时向右偏移,值为负时向左偏移。

        • 垂直偏移: 设置文本标签的垂直偏移,值为正时向下偏移,值为负时向上偏移。

      • 水平对齐: 设置标签在水平方向上的对齐方式,可选

      • 垂直对齐: 设置标签在垂直方向上的对齐方式,可选

      • 宽高: 设置文本标签的宽度与高度,第一个输入框为文本标签的宽度,第二个输入框为文本标签的高度。

      • 超出宽度: 设置文本内容超出设置的宽度展现方式,配置文本宽度时生效,可选 不处理截断换行强制单词换行

        • 不处理: 设置文本内容超出配置宽度时不做任何处理。

        • 截断: 设置文本内容超出配置宽度时截断超出的内容。

        • 换行: 设置文本内容超出配置宽度时文本自动换行。

        • 强制单词换行: 设置文本内容超出配置宽度时文本自动换行,在英语等拉丁文中会强制单词内换行 。

      • 末尾显示文本: 设置文本截断时末尾显示的文本,默认值为 ···。仅在超出宽度设为 截断 时生效。

      • 字体颜色: 设置文本标签字体颜色。默认标签颜色与图形颜色一致。

      • 字体大小: 设置文本标签字体大小,单位为 px

      • 字体粗细: 设置文本标签字体粗细,可选 普通加粗更细。默认为 普通

      • 字体: 设置文本标签字体样式,可选系统内置字体和自定义添加字体。

  • 图形样式: 该系列下图形的颜色、边框设置,支持颜色填充和渐变填充两种方式。
  • 颜色: 设置图形的颜色。

    • 描边颜色: 设置图形描边的颜色。

    • 描边线宽: 设置图形描边线的宽度。值越大,描边越明显;值越小,描边越细腻。

    • 描边类型: 设置图形描边线的类型,可选 实线虚线点线

    • 圆角: 设置图形四角的圆角半径。

  • 阴影属性:

    • 点击设置柱背景阴影颜色。

    • 水平: 阴影的水平偏移量。值为0时阴影在图形下方,值大于0时阴影向右侧偏移,值小于0时阴影向左侧偏移。

    • 垂直: 阴影的垂直偏移量。值为0时阴影在图形下方,值大于0时阴影向下方偏移,值小于0时阴影向下方偏移。

    • 模糊: 阴影的模糊程度。值为0时阴影没有模糊效果,值越大阴影效果越明显。

  • 高亮状态: 鼠标放到扇区上时高亮的样式。

    • 聚焦效果: 在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果。

    • 其余属性配置与普通状态相同。

  • 选中状态: 选中状态下扇区的样式,选择模式为单选或多选时生效。

    • 选择模式: 设置图表的交互选择模式,可选 不可选单选多选

    • 其余属性配置与普通状态相同。

  • 层级配置: 旭日图是一种有层次的结构,为了方便同一层样式的配置,我们提供了层级配置项。

    • 指定层级: 为旭日图的每个层级设置独立的半径范围。第 0 项表示数据下钻后返回上级的图形。第 1 项及之后的每一项分别表示从圆心向外层的层级。

    • 内半径: 设置当前层级的内半径。

    • 外半径: 设置当前层级的外半径。

    • 普通状态: 其属性配置与普通状态相同。

    • 高亮状态: 其属性配置与高亮状态相同。

    • 选中状态: 其属性配置与选中状态相同。

  • 初始动画: 图表初始化渲染的动画配置。

    • 开启动画: 图表渲染时是否启用动画。开启后图表初始化时展示图形具有动画效果。在性能较弱的终端机器查看大屏页面时建议关闭组件动画以节约性能开销。

    • 动画时长(ms): 设置动画的时长。值越大动画持续时间越长。

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

视觉映射

  • 视觉映射可以设置指定数据维度和指定系列的图形展示颜色和图形类型。

  • 当视觉映射为空时点击添加视觉映射。若已存在视觉映射点击添加新的视觉映射。

  • 显示控制器: 是否显示控制器。开启后展示视觉映射控制器,默认为不开启状态。无论是否开启视觉映射配置均生效。

  • 类型: 视觉映射控制器的类型。可选 连续型分段型

    • 连续型: 任意两个数据点之间可以细分出无限多个数值。

    • 分段型: 任意两个数据点之间的个数是有限的。

  • 指定数据维度: 指定用数据的哪个维度,值为维度的索引值。默认取 data 中最后一个维度。

  • 指定系列: 指定取哪个系列的数据,值为系列的索引值。默认取所有系列。

  • 最小值: 指定视觉映射生效的最小值,用户必须进行设置。

  • 最大值: 指定视觉映射生效的最大值,用户必须进行设置。默认值为 200。

  • 视觉元素设置

    • 视觉颜色: 设置映射区域内组件图形的颜色,可添加多个颜色。颜色数量大于 1 时,以添加的颜色作为基准,形成一种渐变的色带,图形根据数据展示色带上的颜色。

    • 图形类型: 指定数据维度、系列所展示的散点图形类型。仅在 散点图 中生效。

    • 图形大小范围: 根据数据大小控制指定数据维度、系列所展示的散点图形的大小。仅在 散点图 中生效。

  • 控制器设置

    • 颜色: 设置映射控制器的颜色,可添加多个颜色。颜色数量大于1时,以添加的颜色作为基准,形成一种渐变的色带,图形根据数据展示色带上的颜色。

    • 排列方式: 控制器的排列方式,可选 水平垂直

      • 水平: 视觉映射控制器水平方向展示。

      • 垂直: 视觉映射控制器垂直方向展示。

    • 水平对齐: 在水平方向上改变控制器的位置。可通过选择调整控制器的位置,也通过数值和百分比自定义其移动的距离。

    • 垂直对齐: 在垂直方向上改变控制器的位置。可通过选择调整控制器的位置,也通过数值和百分比自定义其移动的距离。

    • 两端文字: 控制器两端的文本。第一个输入框为控制器初端显示文本,第二个输入框为控制器末端显示文本。

    • 文字距主体: 控制器与文字之间的距离。控制器类型为 连续型 时,为两端文字与控制器之间的距离。分段型 时为分段标签与控制器之间的距离。值为正数,值越大距离越远。

    • 小数精度: 数据展示保留小数位数,数据精度不够时用0补位。

    • 反转控件: 将控制器反转,对应的两端文字也进行翻转。

    • 鼠标联动高亮: 当鼠标悬浮在组件上时,鼠标位置对应的数值在图标中对应的图形元素会高亮。

    • 图形置于文字: 控制器图形置于文字左边或右边。默认为左边。

    • 图形宽度: 控制器图形的宽度。值为正数,值越大图形越宽。

    • 图形高度: 控制器图形的高度。值为正数,值越大图形越高。

  • 文字信息:

    • 字体颜色: 控制器文字字体的颜色。

    • 字体大小: 控制器文字字体的大小。值为正数,值越大字体越大。

    • 字体粗细: 控制器文字字体的粗细,可选 普通加粗更细。默认为普通。

    • 字体: 选择控制器文字的字体,可选系统内置字体和自定义字体。

  • 手柄设置 仅在类型为 连续型 时生效。

    • 是否拖动: 是否展示控制器手柄,开启后可以拖拽调整选中的范围。默认为开启状态。

    • 拖拽实时更新: 手柄拖拽时组件是否根据选中范围的数据实时更新。

    • 手柄图形: 控制器手柄的样式,可选 矩形三角形。默认为圆角矩形。

    • 手柄大小: 控制器手柄的大小。值为正数,值越大手柄越大。

    • 描边属性: 可调整手柄其描边的颜色、描边样式及宽度。

      • 描边颜色: 手柄描边颜色。描边宽度大于 0 时生效。

      • 描边样式: 手柄描边样式,可选 实线点状线虚线。默认为实线。

      • 描边宽度: 手柄描边宽度。值为正数,值越大描边越宽。

    • 阴影属性: 自定义描边在垂直方向和水平方向上的阴影,并定义阴影颜色,同时可以设置描边的模糊效果。

      • 水平: 阴影的水平偏移量。值为 0 时阴影在手柄下方,值大于 0 时阴影向右侧偏移,值小于 0 时阴影向左侧偏移。

      • 垂直: 阴影的垂直偏移量。值为 0 时阴影在手柄下方,值大于 0 时阴影向下方偏移,值小于 0 时阴影向下方偏移。

      • 模糊: 阴影的模糊程度。值为 0 时阴影没有模糊效果,值越大阴影效果越明显。

  • 指示器设置: 指示器在鼠标移到组件上,或者在移到系列图形上联动高亮的时候出现。仅在类型为 连续型 时生效。

    • 指示器图形: 指示器的形状,可选 矩形三角形。默认为圆形。

    • 指示器大小: 指示器的大小。值为正数,值越大指示器越大。

    • 描边属性: 可调整指示器其描边的颜色、形状及大小。

      • 描边颜色: 指示器描边颜色。描边宽度大于 0 时生效。

      • 描边样式: 指示器描边样式,可选 实线点状线虚线。默认为实线。

      • 描边宽度: 指示器描边宽度。值为正数,值越大描边越宽。

    • 阴影属性: 自定义指示器在垂直方向和水平方向上的阴影,并定义阴影颜色,同时可以设置描边的模糊效果。

      • 水平: 阴影的水平偏移量。值为 0 时阴影在指示器下方,值大于 0 时阴影向右侧偏移,值小于 0 时阴影向左侧偏移。

      • 垂直: 阴影的垂直偏移量。值为 0 时阴影在指示器下方,值大于 0 时阴影向下方偏移,值小于 0 时阴影向下方偏移。

      • 模糊: 阴影的模糊程度。值为 0 时阴影没有模糊效果,值越大阴影效果越明显。

  • 分段信息: 仅在类型为 分段型 时生效。

    • 自动分段: 是否开启自动分段。默认为开启状态。连续数据,会自动平均切分为 5 段。取值的范围通过 最小值最大值 指定。

    • 添加分段: 点击添加分段配置,仅在关闭自动分段时生效。

    • 分段区间: 设置当前分段的区间。第一个输入框为区间开始值,第二个输入框为区间结束值。未设置时为全部数据。

    • 分段标签: 分段图形的文字标签,其文字样式在文本信息中设置。

  • 分段指示器设置: 仅在类型为 分段型 时生效。

    • 显示文本: 是否显示每个分段的文本标签。默认为开启状态。

    • 图元间距: 每两个分段图形之间的间隔,单位为 px。值为正数,值越大间隔越大。

    • 默认图形: 分段信息展示的图形,可选矩形三角形。默认为圆角矩形。

    • 分割段数: 分段指示器分割的段数。默认分割为 5 段。仅关闭自动分段时生效。

标题

  • 标题通常对图表进行概括性说明,包含主标题和副标题。

  • 显示标题: 组件是否显示标题。默认为不显示。

  • 内容

    • 标题

      • 主: 可设置主标题展示的内容。

      • 副: 可设置副标题展示的内容。

    • 超链接: 可对组件标题进行链接配置,实现页面跳转。

      • 主: 配置主标题跳转链接,以打开新窗口的形式进行跳转。仅在开启标题且主标题内容不为空时可用。

      • 副: 配置副标题跳转链接,以打开新窗口的形式进行跳转。仅在开启标题且副标题内容不为空时可用。

  • 位置

    • 水平对齐: 主副标题在水平方向的位置,可选 对齐绝对值百分比

      • 对齐: 主副标题在水平方向对齐方式,可选

      • 绝对值: 主副标题与组件左上角的水平间距,单位为 px

      • 百分比: 主副标题与组件左上角的水平间距,单位为 %

    • 垂直对齐: 主副标题在垂直方向的位置,可选 对齐绝对值百分比

      • 对齐: 主副标题在水平方向对齐方式,可选

      • 绝对值: 主副标题与组件左上角的垂直间距,单位为 px

      • 百分比: 主副标题与组件左上角的垂直间距,单位为 %

  • 外观

    • 内边距: 主副标题距组件上下左右的边距。值越大边距越大。

    • 主副间隔: 主标题与副标题之间的间隔。值越大间隔越大。

  • 主标题文本样式

    • 字体颜色: 可设置主标题文字颜色。默认颜色跟随主题变化。

    • 字体大小: 主标题文字大小。值为正数,值越大字体越大。单位为 px

    • 字体粗细: 主标题字体粗细,可选 普通加粗更细

    • 字体: 主标题字体样式,可选系统内置字体和自定义字体。

  • 副标题文本样式

    • 字体颜色: 可设置副标题文字颜色。默认颜色跟随主题变化。

    • 字体大小: 副标题字体大小。值为正数,值越大字体越大。单位为 px

    • 字体粗细: 副标题字体粗细,可选 普通加粗更细

    • 字体: 副标题字体样式,可选系统内置字体和自定义字体。

图例

  • 图例可以通过颜色、图标等形式标识图表中的不同数据系列,使用户能够快速识别每个系列对应的数据。

  • 用户可以通过点击图例来显示或隐藏对应的数据系列,方便动态调整图表展示的内容。

  • 显示图例: 组件是否显示图例。

  • 选择类型: 设置图例的类型,可选 普通图例分页图例

提示:

设置分页图例时,不一定出现翻页控件。翻页图例出现的条件是,当前图例区域不足以容纳所有图例,一种是图例较多时,一种是当前图例区域较小时,区域大小设置在 区域/位置

  • 选中模式: 设置图例选择的模式,控制是否可以通过点击图例改变系列的显示状态。可选 不可选单选多选

  • 图标: 设置图例展示的图标样式,可选 矩形圆矩形三角形菱形取消图标

  • 图例间距: 设置每两个图例之间的间距。值越大图例间隔越远。

  • 图例宽度: 设置图例图形的宽度。值越大图形越宽。

  • 图例高度: 设置图例图形的高度。值越大图形越高。

  • 内容格式器: 用来格式化图例文本,支持字符串模板和回调函数两种形式。字符串模板可直接使用 enter 按键进行换行,回调函数返回的字符串可以用 \n 换行。支持从 HETU 内置函数中获取变量值。2024.5+

    • 字符串模板: {name}

    • 回调函数: 可直接输入函数体,系统提供了两个参数 dataHETU

      return data;
  • 区域/位置

    • 排列方式: 设置图例列表的布局朝向,可选 水平垂直

      • 水平: 图例从左至右依次排开。

      • 垂直: 图例从上至下依次排开。

    • 区域宽度: 设置图例区域的宽度,仅在排列方式选择水平排列时生效。

    • 区域高度: 设置图例区域的高度,仅在排列方式选择垂直排列时生效。

    • 水平位置: 图例在水平方向的位置,可选 对齐绝对值百分比

      • 对齐: 图例在水平方向对齐方式,可选

      • 绝对值: 图例与组件左上角的水平间距,单位为 px

      • 百分比: 图例与组件左上角的水平间距,单位为 %

    • 垂直位置: 图例在垂直方向的位置,可选 对齐绝对值百分比

      • 对齐: 图例在水平方向对齐方式,可选

      • 绝对值: 图例与组件左上角的垂直间距,单位为 px

      • 百分比: 图例与组件左上角的垂直间距,单位为 %

  • 文字样式

    • 字体颜色: 设置图例的字体颜色。默认颜色跟随主题。

    • 字体大小: 设置图例字体的大小。值越大,图例字体越大。

    • 字体粗细: 设置图例字体的粗细,可选 普通加粗更细

    • 字体: 设置图例字体的样式,可选系统内置字体和自定义字体。

  • 背景块设置 设置图例背景区域的样式

    • 内边距: 设置图例在背景区域中上下左右的间距。值越大,间距越大。

    • 背景色: 设置背景区域的颜色。默认无颜色。

    • 边框色: 设置背景区域的边框颜色。

    • 边框线宽: 设置背景区域边框线的宽度。值越大,边框越宽。

    • 圆角半径: 设置背景区域四个角的圆角样式。

    • 阴影颜色: 设置背景区域的阴影颜色。

    • 阴影大小: 设置背景区域的阴影模糊效果。值为0时阴影没有模糊效果,值越大阴影效果越明显。

    • X 轴偏移: 阴影的水平偏移量。值为0时阴影在背景区域下方,值大于0时阴影向右侧偏移,值小于0时阴影向左侧偏移。

    • Y 轴偏移: 阴影的垂直偏移量。值为0时阴影在背景区域下方,值大于0时阴影向下方偏移,值小于0时阴影向下方偏移。

  • 全选/反选功能设置

    • 开启: 是否开启控件。开启时显示全选/反选控件,默认不开启

    • 选择器位置: 设置全选/反选按钮在图例区域的位置,可选 起始结束。选择 起始 时按钮位于图例开始位置,选择 结束 时按钮位于图例尾端。

    • 按钮间距: 全选与反选两个按钮之间的距离。值越大两个按钮之间距离越大。

    • 据图例: 全选/反选按钮与图例之间的距离。值越大按钮与图例之间距离越大。

    • 文本标签:

      • 内边距: 按钮文字在控件内上下左右四个边框的距离。值越大距离越高。

      • 背景色: 设置控件的背景色。默认无颜色。

      • 边框色: 设置控件的边框颜色。

      • 边框宽度: 设置控件的边框宽度。值越大边框越宽,值为0时不显示边框。

      • 圆角半径: 设置控件四个方向的圆角。值越大圆角越明显。

      • 阴影颜色: 设置控件的阴影颜色。

      • 阴影大小: 设置控件的阴影模糊效果。值为0时阴影没有模糊效果,值越大阴影效果越明显。

      • X 轴偏移: 阴影的水平偏移量。值为0时阴影在控件下方,值大于0时阴影向右侧偏移,值小于0时阴影向左侧偏移。

      • Y 轴偏移: 阴影的垂直偏移量。值为0时阴影在控件下方,值大于0时阴影向下方偏移,值小于0时阴影向下方偏移。

    • 高亮文本标签: 属性设置同 文本标签

  • 分页设置 仅在选择类型为 分页图例 时可配置。

    • 按钮间距: 上页与下页两个按钮之间的距离。值越大两个按钮之间距离越大。

    • 距图例: 翻页按钮与图例之间的距离。值越大按钮与图例之间距离越大。

    • 位置: 翻页按钮在图例区域的位置,可选 起始结束。选择 起始 时按钮位于图例开始位置,选择 结束 时按钮位于图例尾端。翻页按钮与全选/反选按钮位置都设为 起始 时,全选/反选按钮在前。翻页按钮与全选/反选按钮位置都设为 结束 时,全选/反选按钮在后。

    • 按钮颜色: 设置翻页按钮的颜色。

    • 禁按颜色: 设置翻页按钮禁止点击时的颜色。

    • 按钮大小: 设置翻页按钮的大小。值越大按钮越大。

    • 字体颜色: 设置分页字体颜色。

    • 字体大小: 设置分页字体大小。值越大字体越大。

    • 字体粗细: 设置分页字体粗细,可选 普通加粗更细

    • 字体: 设置分页字体的样式,可选系统内置字体和自定义字体。

提示框

  • 适用于在用户与图表交互时显示详细的数据信息。

  • 显示: 组件是否显示提示框。

  • 显示类型: 提示框内展示内容的类型,可选 组件模版2024.3+

    • 组件: 选择需要在提示框内展示的组件。禁止选择自身作为提示组件,不允许选在自身的父组件作为提示组件。仅在显示类型为组件时可配置。2024.3+

    • 模板: 可在模版输入框中输入提示框中内容。支持字符串模板和回调函数两种形式;若当前组件不是图表组件或者地图组件,模版输入框内可以输入html标签。仅在显示类型为模版时可配置。

      • 字符串模板

      模板变量有 {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;
  • 触发方式: 设置提示框被触发的方式,可选 悬停点击悬停或点击2024.3+

    • 悬停: 鼠标指针移动到组件或组件图形上时展示提示框。

    • 点击: 鼠标左键点击组件或组件图形上时展示提示框。

    • 悬停或点击: 悬停或点击二者都可以触发提示框展示。

  • 显示位置: 选择提示框的展示位置,可选 内部中心上边左边下边右边2024.3+

  • 触发点: 提示框显示的触发位置,可选 坐标轴数据项 触发。仅在当前组件为图表组件或者地图组件时可设置。

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

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

  • 多系列排序: 用来选择系列在提示框内的展示顺序,可选 根据系列升序根据系列降序根据数据升序根据数据降序。仅在当前组件为图表组件或者地图组件且显示类型为模版时设置。

  • 外观

    • 背景颜色: 设置提示框的背景颜色。

    • 边框颜色: 设置提示框的边框颜色。

    • 边框宽度: 设置提示框的边框宽度。值越大边框越宽。

    • 内边距: 设置提示框上下左右四边与内容之间的距离。值越大距离越大。

  • 文本样式 仅在显示类型为模版时可设置。

    • 字体颜色: 设置提示框显示内容的字体颜色。

    • 字体大小: 设置提示框显示内容的字体大小。

    • 字体粗细: 设置提示框显示内容的字体粗细,可选 普通加粗更细

    • 字体: 设置提示框显示内容的样式,可选系统内置字体和自定义字体

工具栏

  • 为用户提供了一系列便捷的工具,用于与图表进行交互或对图表进行操作。

  • 显示: 组件是否显示功能按钮。

  • 功能按钮

    • 保存为图片按钮: 将当前图表保存为图片。仅在开启工具栏显示且开启当前按钮显示时生效。

    • 还原按钮: 恢复图表的初始状态。仅在开启工具栏显示且开启当前按钮显示时生效。

    • 数据视图按钮: 以表格形式查看图表的数据。仅在开启工具栏显示且开启当前按钮显示时生效。

  • 位置朝向

    • 排列方式: 功能按钮的布局朝向,可选 水平垂直

    • 水平对齐: 功能按钮在水平方向的位置,可选 对齐绝对值百分比

      • 对齐: 功能按钮在水平方向对齐方式,可选

      • 绝对值: 功能按钮与组件左上角的水平间距,单位为 px

      • 百分比: 功能按钮与组件左上角的水平间距,单位为 %

    • 垂直对齐: 功能按钮在垂直方向的位置,可选 对齐绝对值百分比

      • 对齐: 功能按钮在水平方向对齐方式,可选

      • 绝对值: 功能按钮与组件左上角的垂直间距,单位为 px

      • 百分比: 功能按钮与组件左上角的垂直间距,单位为 %

  • 图表尺寸

    • 图标大小: 功能按钮的大小。值越大,按钮图标越大。

    • 间隔: 功能按钮之间的距离。值越大,按钮之间的距离越大。

数据

静态数据

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

[
  {
    "source": "",
    "target": "1",
    "name": "法学",
    "value": 3
  },
  {
    "source": "1",
    "target": "2",
    "name": "政治",
    "value": 3
  },
  {
    "source": "2",
    "target": "3",
    "name": "国际",
    "value": 1
  },
  {
    "source": "2",
    "target": "4",
    "name": "外交",
    "value": 2
  },
  {
    "source": "",
    "target": "5",
    "name": "工学",
    "value": 25
  },
  {
    "source": "5",
    "target": "6",
    "name": "电子",
    "value": 15
  },
  {
    "source": "5",
    "target": "7",
    "name": "地质",
    "value": 10
  },
  {
    "source": "7",
    "target": "8",
    "name": "勘察",
    "value": 5
  },
  {
    "source": "7",
    "target": "9",
    "name": "资源",
    "value": 1
  },
  {
    "source": "6",
    "target": "10",
    "name": "水利",
    "value": 2
  },
  {
    "source": "6",
    "target": "11",
    "name": "通信",
    "value": 5
  },
  {
    "source": "6",
    "target": "12",
    "name": "能源",
    "value": 4
  },
  {
    "source": "11",
    "target": "13",
    "name": "广播",
    "value": 2
  }
]
  • 源节点

  • 目标节点

  • 节点数据

    • name: 扇区的名称。

    • value: 扇区的大小。

数据资源

  • 选择数据资源: 切换到 数据资源 标签,点击可从数据管理或API中选择相应的数据资源作为组件的数据支撑。

  • 还原默认数据: 点击刷新数据资源。

  • 搜索数据中的字段: 当列表中字段过多时,可通过搜索框搜索列表中的字段。

  • 刷新字段列表: 点击刷新字段列表

  • 字段类型

    • 字符型: 标识符为A

    • 数值型: 标识符为#

交互

扇区单击事件

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

扇区悬停事件

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

扇区移出事件

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

数据响应

旭日图支持数据响应

节点编程

事件

  • 图表配置转换完成后: 图表 Option 配置转换完成后事件。

    • 抛出的参数: 配置完成后的 Option 。
  • 扇区单击事件: 扇区单击触发事件。

    • 抛出的参数: 扇区所携带的数据。
  • 扇区悬停事件: 鼠标在扇区悬停时触发事件。

    • 抛出的参数: 扇区所携带的数据。
  • 扇区移出事件: 鼠标从扇区移出时触发事件。

    • 抛出的参数: 扇区所携带的数据。

动作

  • 导入图表配置: 可导入 Echarts 图表 Option 配置。

    • 接收的参数: 修改后的 Option 。
上次编辑于: 2025/2/22 00:38:42
贡献者: xuch