Skip to main content

柱状图

1 说明

共工的所有图表是基于 echarts 进行元件的改造,如果您想知道共工图表能做到的功能、样式和效果,可以参考 echarts 图表。

下面是柱状图的运行时效果。

2 配置

2.1 数据源

1、数据源

支持通过数据库、逻辑、关联关系三种方式。

2.2 图数据设置

(即为轴设置)

1、横轴维度

1)数据源选数据库或关联关系时,弹窗里有关于排序的配置项

2)数据源选逻辑时,弹窗里无排序配置项(您可以在逻辑里完成排序)

3)当横轴维度选的是日期时间类型时,下面会出现渲染类型配置项

2、纵轴指标

1)初始 0 个,可添加多个(即一个 X 轴对应多个 Y 轴)

2)多指标时,指标可以拖拽排序(这里的最上对应着运行时的最左/下)

3)点击添加或编辑按钮,跳出弹窗

弹框配置项目:

1)纵轴必须是数字类型——精确数字、整数、超长整数;

2)指标名称:点开是公式编辑器,可通过 #实体名.实体属性名 的语法方式动态获取数据作为指标名称;

3)聚合类型:当同一个横轴值对应多个纵轴值时,如何处理这些纵轴值。

3、缺省图形数据

该配置项的功能仅用于编辑态预览图表。您可以在属性栏自行定义 js,作为图表呈现所需要的模拟数据。

2.3 标题

1、显示标题

设置标题是否显示

2、横轴标题

设置横轴的标题文本表达式

3、纵轴标题

设置纵轴标题的文本表达式

2.4 通用

1、网格辅助线

无、水平、垂直、网格,默认无

2、柱形宽度

定义柱子的宽度,默认不填,此时按照数据前端计算适应样式。

3、多指标展示模式

存在多个指标时,柱形图的排布模式:并列、堆叠。单指标时,该配置项无意义

1)并列:水平排布

2)堆叠:垂直排布

2.5 高级

1、开发者模式

默认关闭。开启后,底下出现代码输入框;

同时运行时出现按钮“查看代码”,点击后出现图表代码与编辑框,在此处输入编辑内容,只能看调整后的预览效果,不是实际生效

2.6 检索配置

检索功能指能否检索到图表中关键字。

  • 默认无;
  • 选外部元件时,需要组合检索容器、检索元件进行使用。两边数据源需要保持一致。

2.7 可见性设置

该模块为通用模块,请参考基础元件的文档。

2.8 设计

该模块为通用模块,请参考基础元件的文档。

3 效果展示