数据库建表:
- 数据库中需要提前建好相关表和数据,如下:
创建页面:
创建 Hello World 的1 column布局页面,需要点击【添加页面】按钮
设置页面主题皮肤:
点击新创建的Hello World的页面,并点击左侧的【编辑】按钮,对当前页面进行编辑,选择【外观和风格】模块,在【常规浏览器】中选择我们需要的主题
可以看到我们的当前主题和可以选择的主题
我们选择【Ccs Public Bi3 】主题皮肤,并按【保存】按钮
之后页面就会变成我们想要的主题皮肤
添加设置组件:
按【添加】按钮,选择我们需要的组件
AutoBI
DataView
我们在【ccs autobi】模组中,选择【分体-SQL-查询】【分体-SQL-表格模块(无Sql)】组件,并添加至当前界面上
我们在【ccs dataview】模组中,选择【分体-NoSql-索引-饼图】组件,并添加至当前界面上
拖拽后,适当调整位置,界面如下
首先对【分体-SQL-表格模块(无Sql)】进行配置,选择需要抽取数据的数据源,然后点击【保存】按钮,进行数据源切换
点击【对象列表】按钮,选则需要的表, 通过点击【添加对象】,将表 car 以及 car_series添加至编辑模板
通过连线,确定两张表之间的关系,并选择出需要抽取的字段
点击【解析】后,可以挑选我们需要展示的字段,请注意这里面我们可以设置展示的顺序哦,将我们需要展示的字段依次移到右边框
然后点击【显示设置】按钮
会出现解析后的数据设置页面,我们可以简单输入用于展示的列名称
作为受控组件,需要点击【添加查询条件】按钮,添加查询条件
此处叫做-维度查询,我们需要选择具体哪个表的哪个列接收参数,设置其类型,接收参数名称,这个接收参数名称,我们必须记住,我们会在控制组件中用到,此例子中因为要做模糊查询,故而选中like条件
点击【保存】按钮
关闭当前配置页面,表格我们就配置完毕了
接下来对【分体-NoSql-索引-饼图】进行配置,选择需要抽取数据的数据源,然后点击【保存】按钮,进行数据源切换
点击【对象列表】按钮,选则需要的表, 通过点击【添加对象】,将表 car_series添加至编辑模板
选择需要抽取的数据,然后点击【解析】按钮
会出现数据绑定的界面,进行数据绑定
作为受控组件,需要点击【添加查询条件】按钮,添加查询条件,此处叫做-维度查询,我们需要选择具体哪个表的哪个列接收参数,设置其类型,接收参数名称,这个接收参数名称,我们必须记住,我们会在控制组件中用到,此例子中因为要做模糊查询,故而选中like条件
点击【保存】按钮
关闭当前配置页面,饼图我们就配置完毕了
最后来对【分体-SQL-查询】进行配置,点击【添加元素】,输入名称,类型选择text就好
然后点击【锁止元素】按钮,一些元素和按钮会被置灰,并出现一些其它按钮
点击两次【添加控制模组】,在 联动PortletId 中选择我们页面需要控制的组件名称,在NoSql这块,没有联动名称的概念,所以可以不予输入,只需要输入发送参数的名称,切记此处的发送参数的名称和受控组件中的接收参数的名称是一一对应的
设置完成后,点击【保存】按钮
关闭当前配置页面,查询框我们就配置完毕了
当我们输入3的时候,点击查询,就会将车系名称中含3的都抽取并展示出来
如果您对饼图又或者列宽、展示位置等不满意,只需要去各自组件的基础设置中具体配置就好,这里就不一一赘述了