从零到能打：Pentaho CDE 仪表盘实战全攻略b

实验环境

工欲善其事，必先利其器。版本不对，debug 到怀疑人生。

PBA

安装PBA

1. 到官网或者sourceforge下载源码

2. 下载完后解压，双击start-pentaho.bat

3. 出现这个提示，点击确定

4. 第一次启动比较久，下图为启动成功（如果页面卡了，在这命令行里按回车）

CDE

数据层

• 左侧：创建数据源区域，选择类型后点击即可创建

• 中间：已创建的数据源列表

• 右侧：每个数据源的详细配置项

组件层

• 参数组件：变量的容器，筛选组件的值会自动存入其中

• 筛选组件：下拉、单选、多选、文本输入等，值变化后自动写入参数组件，并可触发其他组件刷新

• 图表组件：柱状图、折线图、饼图、散点图等，指定数据源即可展示，支持监听参数变化自动刷新

• 其他功能组件：用于实现一些特殊功能的组件

视图层

1. 保存 CDE 布局

2. 选择 CDE 布局

3. 添加 JS 或 CSS 资源

4. 添加 Bootstrap 面板

5. 添加表单

6. 添加行 / 列 / 空行

7. 添加图片 / HTML

8. 复制 / 删除元素

• 资源文件：JS 和 CSS 文件，可引用上传到 Pentaho 的静态资源

• 布局：由行、列、空行、图片、HTML 代码组成

基础使用

1. 浏览器打开 http://localhost:8080，点击以评估者身份登录，点击管理员下面的登录按钮

2. 新建cde 创建新的CDE，并保存

3. 创建数据层，这里选择使用jdbc，也可以配置成jndi 输入数据源名，驱动名，用户名，密码，jdbc Url，查询语句 Query sql SELECT * FROM public.dim_date



属性	描述	例子中的值
Name	数据源名字，后面组件层会用到	localhost
Driver	驱动类名	org.postgresql.Driver
Password	数据库密码
Username	数据库用户名
Access Level	数据源权限等级	Public
URL	SQL Url	jdbc:postgresql://localhost:5432/postgres
Query	查询语句	SELECT * FROM public.dim_date
Parameters	查询参数，内容为参数名，参数值	[]
Calculated Columns	对某些列做一些计算	[]
Columns		[]
Output Columns		[]
Output Model		include
Cache Keys	缓存的列	[]
Cache Duration	缓存时间	3600
Cache	是否开启缓存	True

4. 创建组件层，这里选择用table来演示



属性	描述	例子中的值
Name	组件名，没什么用	table
Listeners	需要监听的参数	[]
Column Headers	table组件特有，表头	[]
Column Types	table组件特有，列的类型	[]
Parameters	参数，参数将会传入数据	[]
Datasource	选择数据源，对应数据源的Name	localhost
HtmlObject	用于挂载的html dom节点，例如值为app，则将会渲染到id为app的html元素上，一般使用div作为容器	table
Click Action	点击事件

5. 创建视图层，先添加一个行，再添加一个列，最后添加一个html元素 id=table对应组件的HtmlObject

6. 运行CDE

配置参数

1. 步骤
• 创建查询id的数据源，用于筛选组件显示数值
• 创建参数组件
• 创建筛选组件，配置好数据源与参数容器，当筛选组件值变化时会自动将值放入该容器
• 图表组件监听参数，当参数值变化时图表将会自动刷新
• 图表组件的数据源SQL语句加入变量，变量使用方法：${变量名}
• 创建筛选组件的html元素，这样筛选组件才会显示出来

2. 创建查询id的数据层，还是选择jdbc，只是简单的查询所有id出来
 



属性	描述	例子中的值
Name	数据源名字，后面组件层会用到	localhost
Driver	驱动类名	org.postgresql.Driver
Password	数据库密码
Username	数据库用户名
Access Level	数据源权限等级	Public
URL	SQL Url	jdbc:postgresql://localhost:5432/postgres
Query	查询语句	SELECT dim_date_id FROM public.dim_date
Parameters	查询参数，内容为参数名，参数值	[]
Calculated Columns	对某些列做一些计算	[]
Columns		[]
Output Columns		[]
Output Model		include
Cache Keys	缓存的列	[]
Cache Duration	缓存时间	3600
Cache	是否开启缓存	True

2. 创建变量参数，用来装载变量



属性	描述	例子中值
Name	参数名，查询组件会用到	p_id
Property value	默认值	-
Bookmarkable		False
Public	是否公开	False

3. 创建查询组件，这里我选择了下拉列表



属性	描述	例子中的值
Name	组件名，没啥用	selectId
Parameter	绑定的参数，对应参数的Name	p_id
Listeners	监听的参数 可以监听多个，当参数变化后会自动传入数据源中，这里其实可以去掉，因为query_id数据源没有用到参数	[‘p_id’]
Parameters	参数，提供给Datasource使用	[]
jQuery Plugin	添加jq拓展	-
Value as id	是否作为ID	False
Datasource	查询的数据源，这里是query_id	query_id
Values array	常量值	[]
HtmlObject	挂载的Html dom对象，例如值为app，则将会渲染到id为app的html元素上，一般使用div作为容器	selectId

4. 修改数据展示组件(table)





属性	描述	例子中的值
Name	组件名，没什么用	table
Listeners	需要监听的参数	[“p_id”]
Column Headers	table组件特有，表头	[]
Column Types	table组件特有，列的类型	[]
Parameters	参数，参数将会传入数据	[[“p_id”,“p_id”]]
Datasource	选择数据源，对应数据源的Name	localhost
HtmlObject	用于挂载的html dom节点，例如值为app，则将会渲染到id为app的html元素上，一般使用div作为容器	table
Click Action	点击事件

5. 修改数据源 原sql
修改为 ${p_id}为设置变量名
添加使用到的参数





属性	描述	例子中的值
Name	数据源名字，后面组件层会用到	localhost
Driver	驱动类名	org.postgresql.Driver
Password	数据库密码
Username	数据库用户名
Access Level	数据源权限等级	Public
URL	SQL Url	jdbc:postgresql://localhost:5432/postgres
Query	查询语句	SELECT * FROM public.dim_date where dim_date_id = ${p_id}
Parameters	查询参数，内容为参数名，参数值	[[“p_id”,“p_id”]]
Calculated Columns	对某些列做一些计算	[]
Columns		[]
Output Columns		[]
Output Model		include
Cache Keys	缓存的列	[]
Cache Duration	缓存时间	3600
Cache	是否开启缓存	True

6. 添加查询组件的视图 在原来的table上添加筛选组件的html挂载点 原来：
改为：
 

7. 运行

集成 ECharts

基础使用

1. 获取Echarts，点击超链接打开网页，选择你要使用到的组件，点下载后会获得一个echarts.min.js文件。首页下载的会是一个zip包，这里下载的是打包好的一个js文件

2. 上传echarts到pentaho 选择一个文件夹点上传，选择文件后上传即可 上传完后记得勾选显示隐藏文件，pentaho默认不显示普通资源文件

3. 新建CDE 创建新的CDE，并保存

4. 引入echarts 点击工具栏的添加资源，选js和引用已存在文件

5. 输入名字echarts(不然会找不到js文件)，选择已经上传好的echarts文件

6. 再新建一个js文件，用来写生成echarts的js代码 这里选择自己写代码

7. copy一份官网的例子写在js里



 

8. 新建html代码
 

2. 运行

动态图表

1. 步骤

• 创建参数，用于echarts数据源

• 创建下拉筛选组件，用于动态选择参数

• 创建echarts数据源，并获取api

• jq获取参数，js配置echarts，并通过ajax获取数据

• 创建echarts视图

2. 新建一个cde，并引入echarts

2. 创建参数容器



属性	例子中值
Name	id
Property value
Bookmarkable	False
Public	False

3. 创建下拉筛选组件



属性	例子中的值
Name	selectId
Paramete	id
Listeners	[]
Parameters	[]
jQuery Plugin	-
Value as id	False
Datasource	query_id
Values array	[[“id”,“1”],[“id”,“2”],[“id”,“3”],[“id”,“4”]]
HtmlObject	id

4. 创建下拉组件视图 运行结果

5. 创建echarts数据源 将传进来的参数作为输出结果传出去

7. 保存cde

2. 当在cde里面创建一个数据源时，pentaho会在该文件目录下创建一个同名cda文件，打开该文件 CDA是pentaho的api插件，以后将新开一文章来讲解CDA的使用方法

3. 测试数据源 选择刚才创建好的echarts数据源，输入参数，点击运行



可以看剧数据源将参数作为输出



点击Query Url，复制api

4. 回到cde，创建一个模板组件



属性	描述	例子中的值
Name	组件名，没什么用	echarts
Listeners	需要监听的参数	[“id”]
Parameters	参数，参数将会传入数据源	[[“id”,“id”]]
Datasource	选择数据源，对应数据源的Name	localhost
HtmlObject	用于挂载的html dom节点，例如值为app，则将会渲染到id为app的html元素上，一般使用div作为容器	echarts
Model Handler	处理数据的函数
Template	模板函数，执行js	写在下面
Template Library	模板库
Events	点击事件等事件
Formatters	格式化数据
Model root element	数据源的根节点

5. 挂载模板组件 在筛选组件的上面加一个column，name写echarts对应模板组件的HtmlObject

6. 创建echarts的挂载点 修改原来html，在筛选组件下加上echarts div

1. 运行 模板组件的数据源必须要返回值否则会报错，初始参数的值为null，所以初始运行会报错 当我们改变下拉组件的值，参数不再为null，模板组件刷新，echart通过ajax动态渲染视图

总结

• PBA 平台：安装简单（前提是内存够），双击 bat 即可启动

• CDE 三层架构：数据层喂数据、组件层做交互、视图层搞布局——各司其职，逻辑清晰

• 参数联动：通过参数组件 + Listeners 机制，实现筛选条件与图表的实时联动

• ECharts 集成：借助模板组件和 CDA API，用 Ajax 拉取数据动态渲染图表，让 Dashboard 的颜值和交互力直接拉满

工具只是手段，数据才是目的。选对工具，让数据讲出好故事。

参考链接

• CDE 官方配置文档：http://webdetails.github.io/ccc/#type=line&anchor=time-series-line

• ECharts 官方定制下载

• Pentaho 下载地址（SourceForge）