跳到主要内容

通用配置

通用配置:各类图表(如柱状图、折线图、饼图等)在配置上具有共性,包括基础设置、标题、数值调整、图例配置以及自定义颜色等;下面为图表的通用配置

一、基础配置

基础设置:针对于当前图表的图层、位置、提示语进行配置

1、图层配置

  • 名称:设置图层名称便于在左侧图层栏中快速定位组件,便于大屏维护
  • 显示:此图标是否显示或隐藏,取消勾选隐藏此图表
  • 背景:设置图表卡片区域的背景色
  • 边框:设置图表卡片区域的边框色

2、位置配置

  • X: 横坐标轴距0的距离,如蓝色字体 53
  • Y: 纵坐标轴距0的距离,如蓝色字体 28
  • W:图表宽度
  • H: 图表高度

  • 旋转:组件旋转角度

3、提示语设置

  • 数据悬浮显示,支持配置是否显示,字体大小和颜色

二、标题设置

标题设置:针对图表标题、副标题的描述及位置进行配置

  • 标题是否显示

  • 标题配置:如“销售额”,支持字体颜色、字体粗细程度、字体大小配置
  • 副标题配置:如“(台)”,支持字体颜色、字体粗细程度、字体大小配置
  • 共同配置:支持水平(左对齐、居中、右对齐)和垂直(顶部、居中、底部)

三、X轴设置

X轴设置:针对存在横轴的图表进行个性化配置

  • 1 是否显示X轴:支持X轴显示和隐藏。默认显示X轴
  • 2 轴名称配置:支持配置横轴名称(例如“手机品牌”),并可自定义该名称的字体颜色和字体大小
  • 3 标签配置:允许自定义横轴下标签的字体颜色、字体大小和旋转角度
  • 4 轴线颜色:自定义横轴的轴线颜色
  • 5 类型:支持数值和类型转换
  • 6 网格线设置:支持显示网格线,并可自定义其颜色设置

四、Y轴设置

Y轴设置:针对存在纵轴的图表进行个性化配置

  • 1 是否显示Y轴:支持Y轴显示和隐藏。默认显示Y轴
  • 2 轴名称配置:支持配置总轴名称(例如“销售额”),并可自定义该名称的字体颜色和字体大小
  • 3 标签配置:允许自定义纵轴下标签的字体颜色、字体大小
  • 4 最小值最大值:支持自定义纵轴的最小值(如本示例200)、最大值(如本示例8000)
  • 5 轴线显示:支持纵轴轴线显示和隐藏;支持自定义纵轴的轴线颜色
  • 6 网格线显示:支持显示网格线,并可自定义其颜色设置

五、坐标轴边距设置

坐标轴边距:坐标轴与边框边缘之间的留白距离

  • 1 左边距:坐标轴与左边框之间的留白距离
  • 2 顶边距:坐标轴与上边框之间的留白距离
  • 3 右边距:坐标轴与右边框之间的留白距离
  • 4 底边距:坐标轴与下边框之间的留白距离

六、数值设置

数值设置:对于包含数值的图表,进行数值展示并支持自定义设置

  • 1 数值设置:支持选择是否显示或隐藏数值展示
  • 2 位置:数值展示位置,支持顶部、中间、底部三种风格;针对特殊图表(如漏斗图),支持居左、中间、居右三种风格
  • 3 内容格式: {a}:系列名。 {b}:数据名。{c}:数据值。可组合使用
  • 4 样式设置:支持对数值的字体颜色、粗细和大小进行配置
  • 5 单位设置:支持单位个性化设置,数量级为单位(百分比、千、万)

七、图例设置

图例设置:图表中不同数据系列进行个性化配置

  • 1 图例设置:支持选择是否显示或隐藏图例展示
  • 2 支持图例大小和风格设置
  • 3 支持左右边距和上下边距调整

八、自定义配色

自定义配色:对图表中各个数据系列的颜色进行个性化设置的过程

  • 自定义配色:为该图表每个系列进行配色(如饼状图每个扇形,有几个扇形添加几个颜色)
  • 系统默认配色:为该图表指定系统内已有颜色,下方图片为其中两个实例

九、中心坐标

中心坐标:中心与边框边缘之间的留白距离

  • 支持上下边距和左右边距设置

十、高级设置

高级设置:对图表个性化设置

1、辅助线

为了使特定图表(如柱形图)更加直观,我们提供了辅助线功能。

  • 效果图

  • 辅助线配置