自定义象形柱图

自定义象形柱图是用自定义图标或图形的高度或长短来表示数据多少。

属性

基础

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

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

  • 锁定纵横比：：单击切换是否锁定纵横比，锁定时调整组件尺寸保持其宽度与高度的比例不变。 2024.3+

• 组件位置： 组件在大屏中的位置，包括组件的横坐标和纵坐标，单位为px。横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

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

  提示

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

• 系列颜色： 柱子的颜色。支持颜色填充，默认情况下柱子的颜色为主题的颜色。

系列

自定义象形图为单维度，多度量的图表，因此需要分别设置每个系列下的象形柱属性。

• 系列 1：

• 类型： 设置图形类型，可选 柱状 和 折线。

• 堆叠名： 设置数据堆叠名。如果多个系列的堆叠名称相同，它们会在图表中堆叠在一起，形成 堆叠柱状图 或 折线堆叠图

• 顺序： 设置图形顺序值，可以控制系列中图形的绘制顺序。值较小的图形会被值较大的图形覆盖。

• Y 轴索引： 设置 Y 轴索引，可以将系列绑定到特定的 Y 轴。这在多 Y 轴图表中非常有用。

• 数据标注： 设置是否启用数据标注功能，自动标记出系列中的最大值和最小值。数据标注只有在柱状图或折线图上可用，堆叠柱状图和折线堆叠图上不可用。

• 选择模式： 设置当前系列图形的交互选择模式，可选 不可选、单选、多选。

• 普通状态

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

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

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

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

      • 字符串模板变量：

        • {a} : 系列名。

        • {b} : 数据名。

        • {c} : 数据值。

        • {d}: 百分比。

      示例：

      {b}: {d}

      • 回调函数: 可直接输入函数体，系统提供了两个参数 data 和 HETU。

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

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

      示例：

      return data.name;

      • 参数 HETU 是系统内置函数。可获取 变量池 中的变量值。

    • 位置： 设置文本标签上值的位置。可选 上、左、右、下、内左、内右、内上、内下、内左上、内左下、内右上、内右下。

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

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

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

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

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

    • 水平对齐： 设置标签在水平方向上的对齐方式，可选 左、中 和 右。

    • 垂直对齐： 设置标签在垂直方向上的对齐方式，可选 上、中 和 下。

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

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

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

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

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

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

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

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

    • 字体大小： 设置文本标签字体大小，单位为 px。

    • 字体粗细： 设置文本标签字体粗细，可选 普通、加粗 和 更细。默认为 普通。

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

• 图形样式： 指象形图图标样式，例如偏移、定位等。

  • 图形选择： 设置象形图中使用的图形。

  • 偏移位置： 设置图标相对于坐标轴的水平或垂直偏移，可选 绝对值、百分比。

  • 是否重复： 设置图形是否允许重复。开启后图形会根据数据值重复显示；关闭后每个数据点只会显示一个图形。

  • 图形定位： 设置图形相对于图表的位置，可以调整图形的对齐方式，可选 上、中、下。

  • 图形间隔： 设置图形之间的间隔，可选 绝对值、百分比。调整间隔可以避免图形重叠。

  • 是否剪裁： 设置图形是否剪裁。开启后超出图表边界的图形部分将被剪裁；关闭后图形会完整显示，即使超出边界。

  • 宽度： 设置象形柱的宽度，可选 绝对值、百分比。宽度调整可以控制柱子的粗细。

  • 最小高度： 设置象形柱的最小高度。即使数据值很小，柱子也会保持这个最小高度，以确保图形在图表中可见。

  • 不同系列间距： 设置不同系列之间的柱间距。调整间距可以避免不同系列的柱子重叠。仅在最后一个系列设置生效。

  • 同系列间距： 设置同一系列内部的柱子之间的间距。仅在最后一个系列设置生效。

• 渐变色： 点击开启图形渐变色配置。

  • 渐变色方向： 设置图形渐变色的方向，可为 正下到正上、左下到右上 和 右上到左下。

    • 正下到正上： 设置的两个颜色从上至下进行渐变，最上方显示第一个颜色，最下方显示第二个颜色。

    • 左下到右上： 设置的两个颜色从左下角至右上角进行渐变，左下角显示第二个颜色，右上角显示第一个颜色。

    • 右上到左下： 设置的两个颜色从右上角至左下角进行渐变，左下角显示第一个颜色，右上角显示第二个颜色。

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

    • 初始颜色： 点击第一个颜色选择器设置渐变色的第一个颜色。

    • 渐变范围： 拖动中滑块设置渐变范围，两侧滑块均可拖动。第一个滑块越靠右，则第一个颜色占比越高。第二个滑块越靠左，则第二个颜色越高。

    • 结束颜色： 点击第一个颜色选择器设置渐变色的第二个颜色。

  • 颜色： 设置图形的颜色，仅在 渐变色 关闭时生效。

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

  • 描边线宽： 设置图形描边线的宽度。值越大，描边越明显；值越小，描边越细腻。

  • 描边类型： 设置图形描边线的类型，可选 实线、虚线、点线。

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

• 阴影属性：

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

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

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

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

• 高亮状态： 属性配置与普通状态样式相同。

• 图表标线： 用于在图表中标记特定数值或区域的辅助线，常用于突出显示关键数据点、阈值或趋势线。

  • 添加标线： 点击在下拉框中选择要添加的图表标线，可选 最小值、最大值、平均线、中位线、X 轴标线、Y 轴标线、自定义。

  • 最小值： 在最小值处，沿相应轴方向画线。

    • 名称： 设置标线名称。默认为添加标线的类型。

    • 类型： 设置标线类型，可选 最小值、最大值、平均线、中位线。

    • 起点位置： 设置标线起始点样式。

      • 标记图形： 设置起始点图形，可选系统内置的图标和上传到素材库的图标。

      • 图形尺寸： 设置图形的宽度和高度，可选 px、%。

      • 旋转角度： 设置标记点旋转角度，默认不旋转。

    • 偏移位置： 分别设置在水平和垂直方向上「相对于默认位置」的偏移距离；

  

  • 普通状态： 设置标线默认样式。

    • 文本标签

      • 显示： 设置是否显示文本标签，默认显示。

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

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

        • 字符串模板变量：

          • {a} : 系列名。

          • {b} : 数据名。

          • {c} : 数据值。

          • {d}: 百分比。

        示例：

        {b}: {d}

        • 回调函数: 可直接输入函数体，系统提供了两个参数 data 和 HETU。

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

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

        示例：

        return data.name;

        • 参数 HETU 是系统内置函数。可获取 变量池 中的变量值。

      • 位置： 设置文本标签上值的位置。可选上左右下那内左内右内上内下内左上内左下内右上内右下

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

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

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

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

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

      • 水平对齐： 设置标签在水平方向上的对齐方式，可选 左、中 和 右。

      • 垂直对齐： 设置标签在垂直方向上的对齐方式，可选 上、中 和 下。

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

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

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

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

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

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

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

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

      • 字体大小： 设置文本标签字体大小，单位为 px。

      • 字体粗细： 设置文本标签字体粗细，可选 普通、加粗 和 更细。默认为 普通。

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

    

    • 线样式： 设置标线样式。

      • 颜色： 设置标线的颜色。

      • 宽度： 设置标线的粗细。宽度越大，标线越粗；宽度越小，标线越细。

      • 类型： 设置标线的类型，可选 实线、虚线、点线。

    

  • 高亮状态： 设置鼠标移动到线上方时的样式。

    • 开启： 设置是否开启高亮状态。

    • 其余配置同 普通状态。

  • 最大值： 在最大值处，沿相应轴方向画线。

  • 平均线： 在平均值处，沿相应轴方向画线。

    • 数值精度： 计算平均值时，若遇到小数，设置需要保留的小数部分的位数。
  

  • 中位线： 在中位数处，沿相应轴方向画线。

  • X 轴标线： 在 X 轴的某个特定位置画一条垂直线。

    • X 轴定值： 设置标线位于 X 轴的哪个位置。
  

  • Y 轴标线： 在 Y 轴的某个特定位置画一条水平线。

    • Y 轴定值： 设置标线位于 Y 轴的哪个位置。

  • 自定义： 通过提供两个点的方式，自定义画线。

    • 起点 / 终点：分别设置线的起始点和结束点。

    • 类型： 通过特殊值确定位置，可选 最小值、最大值、平均线、中位线。

    • 轴线定值： 通过轴上的特定标签确定位置，分别确定 X 轴 和 Y 轴。

    • 屏幕坐标： 通过屏幕固定坐标值确定位置。

    • 标记图形： 设置起始点图形。

    • 图形尺寸： 设置图形的宽度和高度，可选 px、%。

    • 偏移位置： 分别设置在水平和垂直方向上「相对于默认位置」的偏移距离；

    • 旋转角度： 设置标记点旋转角度，默认不旋转。

  

• 标签布局： 标签的统一布局配置。该配置项是在每个系列默认的标签布局基础上，统一调整标签的(x, y)位置，标签对齐等属性以实现想要的标签布局效果。点击开启标签布局。

  • 隐藏重叠标签： 是否隐藏重叠标签。开启后当标签重叠时会隐藏重叠标签，默认为开启状态。

  • 是否拖拽： 文本标签是否可以拖拽。开启后文本标签可用鼠标拖拽到任意位置，默认为关闭状态。

  • 防止重叠： 标签重叠时是否挪动标签位置以防止重叠，可选 水平 和 垂直。

    • 水平： 重叠的标签水平方向依次位移。

    • 垂直： 重叠的标签垂直方向依次位移。

  • 标签旋转： 可设置标签的旋转角度。值为0-90，值为0时标签水平显示，值为90时标签垂直显示。

  • 标签偏移： 标签相对于默认位置的偏移量。第一个输入框为在水平位置的偏移量，第二个输入框为垂直位置的偏移量。单位为 px。

  • X 坐标： 以组件左上角为 (0,0) 点，标签在水平坐标的位置。支持 绝对值 和 百分比。值为正数，值越大标签位置越靠右侧。

  • Y 坐标： 以组件左上角为 (0,0) 点，标签在垂直坐标的位置，支持 绝对值 和 百分比。值为正数，值越大标签位置越靠下方。

  • 水平对齐： 标签水平对齐方式，可选 左、中 和 右。

  • 垂直对齐： 标签垂直对齐方式，可选 上、中 和 下。

  • 标签宽高： 设置标签的宽度和高度。第一个输入框为标签的宽度，第二个输入框为标签的高度。单位为 px。

提示：

标签布局的属性开启后，文本标签中的布局相关属性会失效！

• 折线样式： 设置该系列下折线的样式。

  • 平滑曲线： 设置折线是否为平滑曲线。开启后，折线的拐角会变得圆滑，呈现出流畅的曲线效果。

  • 线颜色： 设置折线的颜色。默认跟随主题色。

  • 宽度： 设置折线的宽度。宽度越大，折线越粗；宽度越小，折线越细。

  • 类型： 设置折线的类型，可选 实线、虚线、点线。

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

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

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

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

• 系列 2：系列 2 为另一条柱子的系列设置，配置与系列 1相同。

视觉映射

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

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

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

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

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

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

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

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

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

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

• 视觉元素设置

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

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

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

• 控制器设置

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

  • 排列方式： 控制器的排列方式，可选 水平 和 垂直。

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

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

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

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

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

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

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

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

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

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

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

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

• 文字信息：

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

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

  • 字体粗细： 控制器文字字体的粗细，可选 普通、加粗 和 更细。默认为普通。

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

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

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

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

  • 手柄图形： 控制器手柄的样式，可选 圆、矩形 和 三角形。默认为圆角矩形。

  • 手柄大小： 控制器手柄的大小。值为正数，值越大手柄越大。

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

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

    • 描边样式： 手柄描边样式，可选 实线、点状线 和 虚线。默认为实线。

    • 描边宽度： 手柄描边宽度。值为正数，值越大描边越宽。

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

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

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

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

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

  • 指示器图形： 指示器的形状，可选 圆、矩形 和 三角形。默认为圆形。

  • 指示器大小： 指示器的大小。值为正数，值越大指示器越大。

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

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

    • 描边样式： 指示器描边样式，可选 实线、点状线 和 虚线。默认为实线。

    • 描边宽度： 指示器描边宽度。值为正数，值越大描边越宽。

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

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

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

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

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

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

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

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

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

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

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

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

  • 默认图形： 分段信息展示的图形，可选圆、矩形 和 三角形。默认为圆角矩形。

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

视区

• 视区指图表中实际绘制数据的区域，不包括标题、图例、坐标轴标签等外部元素。

• 显示： 是否显示图表绘制数据区域的边框线。默认不显示。

• 左边距： 绘制区域与组件左边框的距离，可选 绝对值、百分比。值越大距离越大，绘制区域越小，图形左边的留白越多。

• 右边距： 绘制区域与组件右边框的距离，可选 绝对值、百分比。值越大距离越大，绘制区域越小，图形右边的留白越多。

• 上边距： 绘制区域与组件上边框的距离，可选 绝对值、百分比。值越大距离越大，绘制区域越小，图形顶部的留白越多。

• 下边距： 绘制区域与组件下边框的距离，可选 绝对值、百分比。值越大距离越大，绘制区域越小，图形底部的留白越多。

X 轴

• 通常用于表示数据的类别或时间序列。

• 显示： 组件是否显示 X 轴坐标。

• 轴类型： 设置坐标轴的类型，可选 数值轴、类目轴。

  • 数值轴 适用于连续的数值数据，如温度、销售额等。
  • 类目轴 适用于离散的类别数据，如产品名称、城市等。

• 位置： 设置 X 轴的坐标显示位置，可选 上、下。选择 上 时 X 轴紧贴图表数据绘制区域顶部，选择 下 时 X 轴紧贴图表数据绘制区域底部。

• 名称： 设置坐标轴的名称。通常对坐标轴数据进行描述或添加数据单位。

• 名称位置： 设置坐标轴名称的显示位置。可选 开端、中端、末端。

• 轴与名称间距： 坐标轴轴线与名称之间的距离。值越大距离越大。

• 反向坐标轴系： 设置是否反向显示坐标轴数据。开启后坐标轴数据与图表数据均反向排列。

• 两边留白： 设置坐标轴左右两侧是否留白，开启后刻度只是作为分隔线，标签和数据图形都会在两个刻度中间。默认为开启状态。仅在 柱状图 和 折线图 中生效。

• 坐标区间： 设置坐标轴的最小值和最大值。第一个输入框为最小值，第二个输入框为最大值。

• 名称文本样式

  • 字体颜色： 设置坐标轴名称字体颜色。

  • 字体大小： 设置坐标轴名称字体大小。值越大字体越大。

  • 字体粗细： 设置坐标轴名称字体粗细，可选 普通、加粗、更细。

  • 字体： 设置坐标轴名称字体样式，可选系统内置字体和自定义字体。

• 标签

  • 显示： 设置是否显示坐标轴刻度标签。

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

    • 字符串模板： 模板变量为{value}。

        {value}kg

    • 回调函数

      可用参数：

      • HETU： 系统内置函数对象。可获取 变量池 中的变量值。

      • data： 刻度标签的默认文本。

      • index： 图表数据的索引值。

        return data;

  • 字体旋转： 设置坐标轴刻度标签角度值。值为正数时标签逆时针旋转，值为负数时标签顺时针旋转。

  • 对齐方式： 设置刻度标签文字水平对齐方式，可选左、中、右。默认自动。

    • 左： 标签文字向左对齐。

    • 中： 标签文字居中对齐。

    • 右： 标签文字向右对齐。

  • 距离轴线： 设置刻度标签与轴线之间的距离。值越大间距越大。

  • 字体颜色： 设置刻度标签字体颜色。

  • 字体大小： 设置刻度标签字体大小。值越大字体越大。

  • 字体粗细： 设置刻度标签字体粗细，可选 普通、加粗、更细。

  • 字体： 设置刻度标签字体样式，可选系统内置字体和自定义字体。

• 轴线

  • 显示： 设置是否显示坐标轴轴线。

  • 颜色： 设置轴线的颜色。默认跟随主题颜色。

  • 宽度： 设置轴线的宽度。默认值为 1px。

  • 类型： 设置轴线的类型，可选 实线、虚线、点状线。

• 刻度

  • 显示： 设置是否显示坐标轴刻度。

  • 与标签对齐： 设置刻度线是否与标签对齐。仅在刻度显示时生效。

  • 颜色： 设置刻度线的颜色，默认跟随主题颜色。仅在刻度显示时可设置。

  • 宽度： 设置刻度线的宽度。仅在刻度显示时可设置。

• 分割线：

  • 显示： 设置绘图区域是否显示分割线。开启后每组数据之间显示分割线。

  • 颜色： 设置分割线的颜色。

  • 宽度： 设置分割线的宽度。值越大分割线越宽。

  • 类型： 设置分割线的类型，可选 实线、虚线、点状线。

• 分隔区域：

  • 显示： 设置是否显示数据分隔区域。开启后数据绘制区域会根据数据序列分为奇偶两组设置不同的填充色。

  • 奇数颜色： 设置奇数区域的填充颜色。

  • 偶数颜色： 设置偶数区域的填充颜色。

Y 轴

• 用于表示数据的数值维度，帮助用户直观地理解数据的规模、趋势和分布。

• 显示： 组件是否显示 Y 轴坐标。

• 轴类型： 设置坐标轴的类型，可选 数值轴、类目轴。

  • 数值轴 适用于连续的数值数据，如温度、销售额等。
  • 类目轴 适用于离散的类别数据，如产品名称、城市等。

• 位置： 设置 Y 轴的坐标显示位置，可选 左、右。选择 左 时 Y 轴紧贴图表数据绘制区域左侧，选择 右 时 Y 轴紧贴图表数据绘制区域右侧。

• 名称位置： 设置坐标轴的名称。通常对坐标轴数据进行描述或添加数据单位。

• 名称位置： 设置坐标轴名称的显示位置。可选 开端、中端、末端。

• 轴与名称间距： 坐标轴轴线与名称之间的距离。值越大距离越大。

• 反向坐标轴系： 设置是否反向显示坐标轴数据。开启后坐标轴数据与图表数据均反向排列。

• 两边留白： 设置坐标轴左右两侧是否留白，开启后刻度只是作为分隔线，标签和数据图形都会在两个刻度中间。默认为开启状态。仅在 柱状图 和 折线图 中生效。

• 坐标区间： 设置坐标轴的最小值和最大值。第一个输入框为最小值，第二个输入框为最大值。

• 名称文本样式

  • 字体颜色： 设置坐标轴名称字体颜色。

  • 字体大小： 设置坐标轴名称字体大小。值越大字体越大。

  • 字体粗细： 设置坐标轴名称字体粗细，可选 普通、加粗、更细。

  • 字体： 设置坐标轴名称字体样式，可选系统内置字体和自定义字体。

• 标签

  • 显示： 设置是否显示坐标轴刻度标签。

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

    • 字符串模板： 模板变量为{value}。

        {value}kg

    • 回调函数

      可用参数：

      • HETU： 系统内置函数对象。可获取 变量池 中的变量值。

      • data： 刻度标签的默认文本。

      • index： 图表数据的索引值。

        return data;

  • 字体旋转： 设置坐标轴刻度标签角度值。值为正数时标签逆时针旋转，值为负数时标签顺时针旋转。

  • 对齐方式： 设置刻度标签文字水平对齐方式，可选左、中、右。默认自动。

    • 左： 标签文字向左对齐。

    • 中： 标签文字居中对齐。

    • 右： 标签文字向右对齐。

  • 距离轴线： 设置刻度标签与轴线之间的距离。值越大间距越大。

  • 字体颜色： 设置刻度标签字体颜色。

  • 字体大小： 设置刻度标签字体大小。值越大字体越大。

  • 字体粗细： 设置刻度标签字体粗细，可选 普通、加粗、更细。

  • 字体： 设置刻度标签字体样式，可选系统内置字体和自定义字体。

• 轴线

  • 显示： 设置是否显示坐标轴轴线。

  • 颜色： 设置轴线的颜色。默认跟随主题颜色。

  • 宽度： 设置轴线的宽度。默认值为 1px。

  • 类型： 设置轴线的类型，可选 实线、虚线、点状线。

• 刻度

  • 显示： 设置是否显示坐标轴刻度。

  • 与标签对齐： 设置刻度线是否与标签对齐。仅在刻度显示时生效。

  • 颜色： 设置刻度线的颜色，默认跟随主题颜色。仅在刻度显示时可设置。

  • 宽度： 设置刻度线的宽度。仅在刻度显示时可设置。

• 分割线

  • 显示： 设置绘图区域是否显示分割线。开启后每组数据之间显示分割线。

  • 颜色： 设置分割线的颜色。

  • 宽度： 设置分割线的宽度。值越大分割线越宽

  • 类型： 设置分割线的类型，可选 实线、虚线、点状线。

• 分隔区域：

  • 显示： 设置是否显示数据分隔区域。开启后数据绘制区域会根据数据序列分为奇偶两组设置不同的填充色。

  • 奇数颜色： 设置奇数区域的填充颜色。

  • 偶数颜色： 设置偶数区域的填充颜色。

标题

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

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

• 内容

  • 标题

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

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

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

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

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

• 位置

  • 水平对齐： 主副标题在水平方向的位置，可选 对齐、绝对值 和 百分比。

    • 对齐： 主副标题在水平方向对齐方式，可选 左、中 和 右。

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

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

  • 垂直对齐： 主副标题在垂直方向的位置，可选 对齐、绝对值 和 百分比。

    • 对齐： 主副标题在水平方向对齐方式，可选 上、中 和 下。

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

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

• 外观

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

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

• 主标题文本样式

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

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

  • 字体粗细： 主标题字体粗细，可选 普通、加粗 和 更细。

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

• 副标题文本样式

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

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

  • 字体粗细： 副标题字体粗细，可选 普通、加粗 和 更细。

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

图例

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

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

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

• 选择类型： 设置图例的类型，可选 普通图例和分页图例。

提示：

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

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

• 图标： 设置图例展示的图标样式，可选 圆、矩形、圆矩形、三角形、菱形 和 取消图标。

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

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

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

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

  • 字符串模板： {name}

  • 回调函数： 可直接输入函数体，系统提供了两个参数 data 和 HETU。

    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。

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

• 图表尺寸

  • 图标大小： 功能按钮的大小。值越大，按钮图标越大。

  • 间隔： 功能按钮之间的距离。值越大，按钮之间的距离越大。

区域缩放

• 适用于更灵活地探索和分析大量数据中的细节部分，从而聚焦于特定数据区间。

• 当区域缩放为空时点击添加区域缩放。若已存在区域缩放点击添加新的区域缩放。

• 缩放类型： 设置缩放类型，可选 滑块缩放、鼠标缩放。

  • 滑块缩放： 在图表下方或侧边显示一个可拖动的滑块，用户通过拖动滑块来调整数据的显示范围。

  • 鼠标缩放： 用户可以通过鼠标滚轮或触控板直接对图表进行缩放操作。

• 启用： 设置是否启用区域缩放。

• 作用范围： 设置缩放功能作用的坐标系，可选 x 轴、y 轴。

• 数据窗口比例： 设置滑块所占据的数据窗口的百分比。通过调整比例，可以控制滑块初始显示的范围大小。

• 锁定比例： 设置是否锁定滑块的比例。锁定后，滑块的宽度或高度固定，用户只能拖拽滑块来移动数据窗口，而不能改变滑块的大小。

• 滑块宽度： 设置滑块组件的宽度，可以控制滑块在水平方向上的显示大小。仅缩放类型选择 滑块缩放 时可设置。

• 滑块高度： 设置滑块组件的高度，可以控制滑块在垂直方向上的显示大小。仅缩放类型选择 滑块缩放 时可设置。

• 水平位置： 设置滑块组件在水平方向的位置，可选 对齐、绝对值、百分比。仅缩放类型选择 滑块缩放 时可设置。

• 垂直位置： 设置滑块组件在垂直方向的位置，可选 对齐、绝对值、百分比。仅缩放类型选择 滑块缩放 时可设置。

• 滑动显示文本： 设置是否在滑动滑块时显示当前数据范围的文本提示。仅缩放类型选择 滑块缩放 时可设置。

• 开启刷选： 设置是否开启刷选功能。刷选功能允许用户通过鼠标拖动选择一个区域，并自动缩放至该区域。仅缩放类型选择 滑块缩放 时可设置。

• 滑块区域背景： 设置滑块区域的背景颜色。仅缩放类型选择 滑块缩放 时可设置。

• 数据阴影： 数据阴影可以简单地反应数据走势。仅缩放类型选择 滑块缩放 时可设置。

  • 区域颜色： 设置数据阴影中填充区域的颜色。

  • 线条颜色： 设置数据阴影边缘线条的颜色。

  • 线条宽度： 设置数据阴影边缘线条的宽度。线条宽度决定了轮廓的粗细程度。

  • 线条类型： 设置数据阴影边缘线条的类型，可选 实线、虚线、点线。

• 选中数据阴影： 突出显示用户正在查看的数据区间。仅缩放类型选择 滑块缩放 时可设置。

  • 区域颜色： 设置选中数据阴影中填充区域的颜色。

  • 线条颜色： 设置选中数据阴影边缘线条的颜色。

  • 线条宽度： 设置选中数据阴影边缘线条的宽度。线条宽度决定了轮廓的粗细程度。

  • 线条类型： 设置选中数据阴影边缘线条的类型，可选 实线、虚线、点线。

• 移动手柄： 滑块缩放组件中用于拖动调整数据范围的操作控件。用户可以通过拖动手柄来改变滑块的位置，从而调整图表的显示范围。仅缩放类型选择 滑块缩放 时可设置。

  • 手柄高度： 设置移动手柄的尺寸高度。手柄高度决定了手柄在垂直方向上的大小。

  • 渐变色： 设置是否开启移动手柄的渐变色效果。

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

      • 正下到正上： 设置的两个颜色从上至下进行渐变，最上方显示第一个颜色，最下方显示第二个颜色。

      • 左下到右上： 设置的两个颜色从左下角至右上角进行渐变，左下角显示第二个颜色，右上角显示第一个颜色。

      • 右上到左下： 设置的两个颜色从右上角至左下角进行渐变，左下角显示第一个颜色，右上角显示第二个颜色。

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

      • 初始颜色： 点击第一个颜色选择器设置渐变色的第一个颜色。

      • 渐变范围： 拖动中滑块设置渐变范围，两侧滑块均可拖动。第一个滑块越靠右，则第一个颜色占比越高。第二个滑块越靠左，则第二个颜色越高。

      • 结束颜色： 点击第一个颜色选择器设置渐变色的第二个颜色。

  • 颜色： 设置移动手柄的图形的填充颜色。仅在 渐变色 关闭时可设置。

  • 描边颜色： 设置移动手柄的图形的描边颜色。

  • 描边线宽： 设置移动手柄的描边线宽。描边线宽决定了手柄轮廓的粗细程度。

  • 描边类型： 设置移动手柄的描边类型，可选 实线、虚线、点线。

  • 模糊大小： 设置移动手柄的图形阴影的模糊大小。值为0时阴影没有模糊效果，值越大阴影效果越明显。

  • 颜色： 设置移动手柄的图形阴影的颜色。

  • 水平偏移： 设置移动手柄图形阴影水平方向上的偏移距离。值为0时阴影在手柄下方，值大于0时阴影向右侧偏移，值小于0时阴影向左侧偏移。

  • 垂直偏移： 设置移动手柄图形阴影垂直方向上的偏移距离。值为0时阴影在组件下方，值大于0时阴影向下方偏移，值小于0时阴影向下方偏移。

• 刷选框样式 当鼠标样式变为 + 时在滑块区域拖动鼠标可进行刷选。开启刷选功能后生效。仅缩放类型选择 滑块缩放 时可设置。

  • 渐变色： 设置是否开启刷选框的渐变色效果。

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

      • 正下到正上： 设置的两个颜色从上至下进行渐变，最上方显示第一个颜色，最下方显示第二个颜色。

      • 左下到右上： 设置的两个颜色从左下角至右上角进行渐变，左下角显示第二个颜色，右上角显示第一个颜色。

      • 右上到左下： 设置的两个颜色从右上角至左下角进行渐变，左下角显示第一个颜色，右上角显示第二个颜色。

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

      • 初始颜色： 点击第一个颜色选择器设置渐变色的第一个颜色。

      • 渐变范围： 拖动中滑块设置渐变范围，两侧滑块均可拖动。第一个滑块越靠右，则第一个颜色占比越高。第二个滑块越靠左，则第二个颜色越高。

      • 结束颜色： 点击第一个颜色选择器设置渐变色的第二个颜色。

    • 颜色： 设置刷选区域的填充颜色。仅在 渐变色 关闭时可设置。

    • 描边颜色： 设置刷选区域的描边颜色。

    • 描边线宽： 设置刷选区域的描边线宽。描边线宽决定了手柄轮廓的粗细程度。

    • 描边类型： 设置刷选区域的描边类型，可选 实线、虚线、点线。

    • 模糊大小： 设置刷选区域阴影的模糊大小。值为0时阴影没有模糊效果，值越大阴影效果越明显。

    • 颜色： 设置刷选区域阴影的颜色。

    • 水平偏移： 设置刷选区域阴影水平方向上的偏移距离。值为0时阴影在手柄下方，值大于0时阴影向右侧偏移，值小于0时阴影向左侧偏移。

    • 垂直偏移： 设置移刷选区域阴影垂直方向上的偏移距离。值为0时阴影在组件下方，值大于0时阴影向下方偏移，值小于0时阴影向下方偏移。

时间轴

• 用于展示时间序列数据，用户可以通过滑动或点击时间轴上的节点，查看不同时间点的数据状态。

• 显示： 是否开启时间轴，组件初始化不开启时间轴。开启后需在数据配置面板添加对应的时间轴字段配置。

• 轴的类型： 设置时间轴数据类型，可选 数值轴、类目轴、时间轴。设置为 时间轴 时，组件会对值进行时间格式转换。

• 当前选中项： 设置默认选中时间轴的数据项。值为数据索引。

• 自动播放： 设置是否自动播放。开启后组件渲染完成会自动切换数据。

• 循环播放： 设置是否循环播放。开启后当播放到最后一组数据时继续从第一组数据开始播放。

• 反向播放： 设置是否反向播放。开启后数据从后至前进行播放。

• 拖拽更新： 设置是否可以拖拽改变时间点。开启后可用鼠标拖拽轴线上的时间点进行更新组件。

• 反向放置： 设置进度条是否反向放置。开启后进度条从后至前渲染数据。

• 时间间隔： 设置时间轴自动播放的时间间隔。值越大，间隔时间越长。

• 摆放方式： 设置时间轴摆放方式，可选 水平、垂直两个方向。

• 左边距： 设置时间轴与组件左边的距离，可选 自适应、绝对值、百分比。

• 右边距： 设置时间轴与组件右边的距离，可选 自适应、绝对值、百分比。

• 上边距： 设置时间轴与组件上边的距离，可选 自适应、绝对值、百分比。

• 下边距： 设置时间轴与组件下边的距离，可选 自适应、绝对值、百分比。

• 标记图形： 设置时间轴轴线上时间点的显示图形，可选 无、圆、矩形、三角形。默认为圆。

• 标记大小： 设置时间轴轴线上时间点图形的大小。值越大图形越大。

• 旋转角度： 设置时间轴轴线上时间点图形的旋转角度值。

• 轴线

  • 普通状态

    • 显示： 设置是否显示时间轴的轴线。默认为开启状态。

    • 颜色： 设置轴线的颜色。

    • 宽度： 设置轴线的宽度。值越大轴线越宽，默认轴线宽度为1

    • 类型： 设置轴线样式，可选 实线、虚线、点状线。

  • 完成状态4.5+

    • 颜色： 设置播放完成后轴线的颜色。

    • 宽度： 设置播放完成后轴线的宽度。值越大轴线越宽，默认轴线宽度为1

    • 类型： 设置播放完成后轴线样式，可选 实线、虚线、点状线。

• 文本标签

  • 文本标签： 设置时间轴的文本标签，可用于说明图形的一些数据信息，例如值、名称等。

    • 显示： 时间轴上时间点是否显示文本标签。默认为开启状态。

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

      • 字符串模板： {name}

      • 回调函数： 可直接输入函数体，系统提供了两个参数 data 和 HETU。

      return data;

      • 字体颜色： 设置文本标签字体的颜色。

      • 字体大小： 设置文本标签字体的大小。值越大字体越大。

      • 字体粗细： 设置文本标签字体粗细，可选 普通、加粗、更细。

      • 字体： 设置文本标签字体样式，可选系统内置字体与自定义字体。

      • 标签位置： 设置文本标签与轴线的距离。值越大距离越大。

      • 旋转角度： 设置文本标签旋转的角度。

      • 对齐方式： 设置文本标签对齐方式，可选 左、中、右。

    • 高亮标签： 同 文本标签

• 图形样式

  • 渐变色： 点击开启渐变色。

    • 渐变色方向： 每个图形渐变色的方向，可为 正下到正上、左下到右上 和 右上到左下。

      • 正下到正上： 设置的两个颜色从上至下进行渐变，最上方显示第一个颜色，最下方显示第二个颜色。

      • 左下到右上： 设置的两个颜色从左下角至右上角进行渐变，左下角显示第二个颜色，右上角显示第一个颜色。

      • 右上到左下： 设置的两个颜色从右上角至左下角进行渐变，左下角显示第一个颜色，右上角显示第二个颜色。

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

      • 初始颜色： 点击第一个颜色选择器设置渐变色的第一个颜色。

      • 渐变范围： 拖动中滑块设置渐变范围，两侧滑块均可拖动。第一个滑块越靠右，则第一个颜色占比越高。第二个滑块越靠左，则第二个颜色越高。

      • 结束颜色： 点击第一个颜色选择器设置渐变色的第二个颜色。

  • 颜色： 设置图形的颜色，仅在 渐变色 关闭时生效。

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

  • 描边线宽： 设置图形的描边宽度。值为正数，值越大描边线越宽。

  • 描边类型： 设置图形描边类型，可选 实线、虚线 和 点线。

  • 圆角半径： 设置图形的圆角。值为正数，值越大圆角越明显。支持 绝对值 和 百分比 两种数值类型。

  • 阴影属性：

    • 点击设置阴影颜色。

    • 水平： 阴影的水平偏移量。值为0时阴影在组件下方，值大于0时阴影向右侧偏移，值小于0时阴影向左侧偏移。

    • 垂直： 阴影的垂直偏移量。值为0时阴影在组件下方，值大于0时阴影向下方偏移，值小于0时阴影向下方偏移。

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

  • 高亮图形： 同 图形样式

  • 完成状态： 同 图形样式

• 按钮设置

  • 按钮设置： 对时间轴的按钮进行设置，例如播放按钮。

    • 播放按钮： 时间轴是否添加播放按钮控件。默认为开启状态。

    • 前进按钮： 时间轴是否添加前进按钮控件。默认为开启状态。

    • 后退按钮： 时间轴是否添加后退按钮控件。默认为开启状态。

    • 按钮尺寸： 时间轴已添加按钮的大小。值越大按钮越大。

    • 按钮间隔： 按钮之间的距离。值越大距离越大。

    • 颜色： 设置按钮的颜色。

    • 边框颜色： 设置按钮边框线的颜色。

    • 边框宽度： 设置按钮边框线的宽度。值越大边框越宽。

  • 高亮按钮： 高亮按钮是设置按钮高亮的状态。仅对已经添加的按钮生效。

    • 颜色： 高亮按钮的颜色。

    • 边框颜色： 高亮按钮的边框线颜色。

    • 边框线宽： 高亮按钮边框线宽度。

• 当前按钮设置

  • 标记图形： 设置时间轴上当前时间点显示图形，可选 无、圆、矩形、三角形。默认为圆。

  • 标记大小： 设置当前时间点图标大小。值越大图标越大。

  • 旋转角度： 设置当前时间点图标旋转的角度值。

  • 颜色： 设置当前时间点图形的颜色。

  • 边框颜色： 设置当前时间点图形的边框线颜色。

  • 边框线宽： 设置当前时间点图形的边框线宽度。值越大边框越宽。

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

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

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

数据

静态数据

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

[
  {
    "x": "一月",
    "y1": 33,
    "y2": 21
  },
  {
    "x": "二月",
    "y1": 12,
    "y2": 14
  },
  {
    "x": "三月",
    "y1": 41,
    "y2": 63
  }
]

• x： 维度，各柱的类目。

• y1： 度量，系列 1 柱的值。

• y1： 度量，系列 2 柱的值。

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

数据资源

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

• 还原默认数据： 点击①处刷新数据资源。

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

• 刷新字段列表： 点击②处刷新字段列表

• 字段类型

  • 字符型： 标识符为A。

  • 数值型： 标识符为#。

交互

柱图单击交互事件

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

柱图悬停事件

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

柱图移出事件

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

X 轴标签单击事件

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

Y 轴标签单击事件

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

数据响应

柱状图支持数据数据响应。

数据上卷，下钻

柱状图支持数据上卷、下钻。

节点编程

事件

• 柱图点击事件： 柱子单击触发事件。

  • 抛出的参数： 柱子所携带的数据。

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

  • 抛出的参数： 配置完成后的 Option 。

• 柱图悬停事件： 鼠标悬停到柱图时触发。3.0+

  • 抛出的参数： 柱图所携带的数据。

• 柱图移出事件： 鼠标移出柱图时触发。3.0+

  • 抛出的参数： 柱图所携带的数据。

• 图例切换事件： 图表图例切换时触发。3.0+

  • 抛出的参数： 切换的图例名称及选中状态。

• 时间轴切换事件： 时间轴节点切换时触发。3.0+

  • 抛出的参数： 时间轴节点名称。

• X 轴/角度轴标签单击事件： X 轴/角度轴标签单击时触发。3.0+

  • 抛出的参数： 标签值。

• Y 轴/径向轴标签单击事件： Y 轴/径向轴标签单击时触发。3.0+

  • 抛出的参数： 标签值。

• 伸缩域改变事件： 伸缩区域改变时触发。3.0+

  • 抛出的参数： 开始/结束位置的百分比值。

动作

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

  • 接收的参数： 修改后的 Option 。

• 设置图例： 设置图例的选中状态。3.0+

    {
      "类型一": true,
      "类型二": false,
      "类型三": false
    }

• 设置时间轴： 设置活动的时间轴节点。 3.0+

  • 接受参数： 时间轴节点名称。例如：

    {
      "value": "2021"
    }