1. 概述
1.1 版本
| FineBI 版本 | FineBI JAR 包版本 |
|---|---|
| 7.0 | 2023-09-04 |
1.2 功能场景
安装BI Echarts图表集成插件后，FineBI可以对接Echarts图表，图表组件类型支持Echarts图表
2. 插件介绍
2.1 插件安装
插件获取：BI echarts图表集成插件
设计器插件安装方法参照：设计器插件管理
服务器安装插件方法参照：服务器插件管理
2.2 插件使用
2.2.1 创建图表组件
在分析主题界面，添加组件，进入组件编辑界面，图表类型选择Echarts图表
2.2.2 编辑图表组件
1）拖入数据字段
将数据集中需要使用的字段拖入图表编辑区
2） 编辑数据算子
数据算子，支持对原始图表数据（主要的内容有字段配置（fileds）和按列存储的二维表数据（colData））进行进一步处理
| 旭日图数据算子示例 | ||
function dataCal(originData) {
var dataModels = originData.dataModels;
var colData = dataModels[0].colData;
var data;
var map = {};
var arr = [];
for (var i = 0; i < colData[0].length; i++) {
var id = colData[0][i];
var pid = colData[1][i];
var name = colData[2][i];
var value = colData[3][i];
if (map[id]) {
map[id].name = name;
map[id].value = value;
} else {
map[id] = {
name: name,
value: value,
children: []
}
}
if (pid && pid.length > 0) {
if (!map[pid]) {
map[pid] = {
children: []
}
}
map[pid].children.push(map[id]);
}
if (!pid || pid.length === 0) {
data = map[id];
}
}
return data.children;
}参数说明：
|
3 ）编辑配置算子
配置算子，基于上一步处理的数据，输出图表配置（对应Echarts的属性配置）
| 旭日图配置算子示例 | ||||||
// 同步调用
function optionCal(data, chartConfig) {
var option = {
series: {
type: 'sunburst',
// emphasis: {
// focus: 'ancestor'
// },
data: data,
radius: [0, '90%'],
label: {
rotate: 'radial'
}
}
};
return option;
}
// 异步调用，需要控制好加载逻辑，比如有些异步资源只能加载一次
function optionCal(data, chartConfig, callbackFun) {
var option = {
series: {
type: 'sunburst',
// emphasis: {
// focus: 'ancestor'
// },
data: data,
radius: [0, '90%'],
label: {
rotate: 'radial'
}
}
};
callbackFun({
option: option,
chartContainerCb: function(myChart) {
console.log(myChart);
}
});
}说明：
|
4）预览图表
数据算子和配置算子编辑完成后，点击运行，可以在右侧预览图表样式，如果此时开启了后端计算，则配置算子需要保存后才可生效
5）高级配置
数据后端计算：默认关闭，此时数据算子走前端计算；开启后，数据算子将在后端执行
2.2.3 模版管理
1）另存模版
点击另存模板，弹窗编辑名称、描述、公共模板等配置信息，点击确定保存。可以选择新增模版或者更新已有模版。
开启公共模板后，其他用户可以在引用模板中看到并引用。
保存成功后，可在模板引用弹窗中选择对应模板。
2）引用模版
点击引用模板按钮，弹窗中可选择个人和公共模板进行引用
模板引用成功后，支持继续设置算子同步（默认开启同步，关闭同步后，可以自行编辑配置）或者关闭模板引用
3）删除模版
删除模板，当前支持删除个人下的非公共模板
2.2.4 图表组件应用
仪表板编辑页面添加组件，即可预览
2.2.4 全局配置
JS引擎：后端计算相关，默认调用J2V8（需工程支持J2V8），如不支持，尝试调用NASHORN
3. 注意事项
3.1 数据格式转换相关：数值格式当前不支持，仅传递原始图表数据；前端计算模式下，日期字段支持格式转化（后端计算开启时不支持）
3.2 不支持移动端
3.3 不支持后台导出
3.4 暂不支持跳转和联动其他组件（其他组件可单向联动echarts图表组件）
上一篇：热力区域图
