跳到主要内容

制作第一张BI&大屏

1.图表创建

在报表创作模块中,点击【新建图表】按钮后,在弹框中输入图表名称,之后选择图表存放的位置,点击【确定】按钮即可。如下图:

待上一步创建出图表后,点击该图表,或者点击图表的【图表设计】按钮,即可进入到图表的设计界面,就可以开始制作想要的图表啦!

image
Preview

2.图表设计

图表设计器的界面,通过可视化配置和拖拽式操作方式,即可完成图表的设计过程。如下图:

image
Preview

2.1数据准备

点击工具中视图区域的【添加数据集】,打开数据面板,如下图:

image
Preview


选择【新建Json数据集】。如下图:

image
Preview


将准备好的数据Json字符串贴入到界面上的【数据Json】里面,如下图:

[{"商品":"A产品","季度":1,"销售额":5890.56},{"商品":"A产品","季度":2,"销售额":4566.26},{"商品":"A产品","季度":3,"销售额":7861.56},{"商品":"A产品","季度":4,"销售额":5654.56},{"商品":"B产品","季度":1,"销售额":5890.56},{"商品":"B产品","季度":2,"销售额":4456.16},{"商品":"B产品","季度":3,"销售额":7561.56},{"商品":"B产品","季度":4,"销售额":3554.56}]

image
Preview


点击【保存并更新】,系统会去解读数据Json里面的信息,解读成功后会跳转到【数据面板】栏目上并展现数据Json中包含的字段。之后就可以开始进行报表设计了。

image
Preview

2.2样式设计

点击左侧图表组件中的标准柱状图,如下图:

image
Preview


点击标准柱状图右侧的编辑按钮。如下图:

image
Preview


选择创建的数据表,并将数据表中字段将数据面板中的字段拖入到维度度量中,即可对标准柱状图进行数据渲染以及样式的美化操作,如设置图形基础、图例、横轴、纵轴等。如下图:

image
Preview

2.3保存预览

图表设计完成后,点击右上角的【保存】按钮,对图表配置进行保存。如下图:

image
Preview


画布中所有控件设计完成后,点击右上角的【保存】按钮,对画布配置进行保存。如下图:

image
Preview


点击设计界面右上角的【预览】按钮,对画布进行查看。