BI Echarts图表集成插件 FineReport帮助文档|报表开发|报表使用|学习教程

最新历史版本 :BI Echarts图表集成插件返回文档

编辑时间:12-28 10:11 历史版本: 上一篇历史版本 内容长度:12824 图片数:14目录数:3 修改原因:新增内容

1. 概述
2. 插件介绍
3. 注意事项

1. 概述编辑

1.1 版本

FineBI 版本	FineBI JAR 包版本
6.0.13	2023-09-04

1.2 功能场景

安装BI Echarts图表集成插件后，FineBI可以对接Echarts图表，图表组件类型支持Echarts图表

2. 插件介绍编辑

2.1 插件安装

插件获取：请扫描下方二维码，添加运营人员微信，可获取安装包和试用指导

设计器插件安装方法参照：设计器插件管理
服务器安装插件方法参照：服务器插件管理

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;
}

参数说明：

originData.dataModels

存放列信息（fields）和列数据（colData）

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);
    }
  });
}

说明：

data

上一步配置算子处理完数据返回的数据

chartConfig

图表配置的相关信息，一般较少用到

callbackFun

可缺省。

支持异步回调，如果是同步调用，直接return option即可。

option传入echarts配置。

chartContainerCb可以获取到echarts实例。

调用示例：

callbackFun({
option: option,
chartContainerCb: function(myChart) {
console.log(myChart);
}
});