更新时间:2024-05-10 GMT+08:00
分享

热力图

热力图是柱状图的一种,通过对色块着色来显示数据的统计图表。

在大屏设计页面,从“全部组件 > 图表”中,拖拽“热力图”组件至画布空白区域,如图1

图1 热力图
图2 边距样式说明

卡片

卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。

图3 卡片
  • 卡片装饰:卡片装饰设置,可根据自身的业务需求选择不同的卡片样式。单击“清除样式”,可清除已设置的装饰样式。
  • 标题:
    • 标题:是否显示组件标题。
    • 内容:组件标题内容。
    • 字体:设置标题内容的字体、大小和颜色等。
    • 对齐:标题相对于组件的对齐方式。
    • 标题背景色:设置标题的背景颜色。
  • 背景
    • 背景颜色:组件卡片背景颜色。
    • 边框:组件卡片边框设置,支持无边框、全边框和角边框三种样式。设置为全边框和角边框时,支持设置组件外圈边框的线型、圆角等。
    • 样式:选择图片时,图片显示的样式,支持普通、居中、拉伸和平铺四种样式。
    • 选择图片:使用本地的图片作为组件背景,支持新增目录和子目录,便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片,且每张图片不能超过50MB。
  • 特效:组件是否高亮显示,支持默认展示和跳转到页面时展示。
  • 边距:组件中图表距离整个组件四边(上、下、左、右)的距离(参见图2),默认为0,即铺满整个组件。
    • 上边距:图表到组件边框顶部的距离。
    • 右边距:图表到组件边框右侧的距离。
    • 下边距:图表到组件边框底侧的距离。
    • 左边距:图表到组件边框左侧的距离。
  • 边框圆角:边框的圆角,四个角弧度取值范围为0~500,单位px。
  • 图表背景:设置图表的背景颜色。

图形

图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。

图4 图形
  • 颜色:设置图表中,图形的颜色。
  • 热力颜色

    在颜色设置中,可以更改热力颜色,也可以单击“新增颜色设置”,添加色块颜色。

  • 热力范围

    着色显示的数据范围,需要设置最大值和最小值。

  • 热力标注

    设置是否显示标注,设置显示时,需要设置字体、字体颜色和字体大小。

图例

图例是指在多维度可视化图形表达中,用以区分不同维度可视化图形的提示标识。

图5 图例
  • 显示图例:是否展示图例。
  • 位置选择:图例的位置。
  • 顶部间隔:图例到组件顶部的间隔。
  • 底部间隔:图例到组件底部的间隔。
  • 可拖拽手柄:图例上是否展示可拖拽手柄。
  • 图例宽度:设置图例的宽度。
  • 图例高度:设置图例的高度。
  • 鼠标悬浮联动:是否有鼠标悬浮联动效果。

坐标轴

在坐标轴中,设置图表的x轴和y轴,如是否显示x轴y轴、字体、字体颜色、是否显示刻度等。

图6 坐标轴
  • x轴
    • X轴:是否显示X轴。
    • 坐标轴分割段数:设置坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
    • 最小值:设置坐标轴的最小值。
    • 最大值:设置坐标轴的最大值。
    • 刻度标签旋转的角度:控制刻度标签的旋转,在文字过长时可以避免重叠。
    • 轴线显示:控制是否显示轴线。
    • 刻度显示:控制是否显示刻度。
    • 线的颜色:轴线的颜色。
    • 标签显示:是否显示刻度标签。打开后需要设置刻度标签字体、字体颜色、大小、粗细。
    • 刻度标签字体:刻度标签的字体、字体颜色、字体大小设置。
    • 网格线是否显示:是否显示轴网格线、轴网格线的类型和颜色设置。
  • y轴
    • Y轴:是否显示Y轴。
    • 最小值:设置坐标轴的最小值。
    • 最大值:设置坐标轴的最大值。
    • 轴线显示:控制是否显示轴线。
    • 刻度显示:控制是否显示刻度。
    • 线的颜色:轴线的颜色。
    • 标签显示:是否显示刻度标签。打开后需要设置刻度标签字体、字体颜色、大小、粗细。
    • 刻度标签字体:刻度标签的字体、字体颜色、字体大小设置。
    • 网格线是否显示:是否显示轴网格线、轴网格线的类型和颜色设置。

数据

在数据中,设置热力图组件的数据来源,更多介绍请参见数据接入

交互

在交互中,配置热力图与其他组件或页面之间的交互能力。交互设置更多介绍,请参见交互设置

分享:

    相关文档

    相关产品