【已下架插件文档】echarts图表插件帮助文档

 

该插件目前已下架帆软市场，本文档仅提供给历史使用了该插件的客户，帆软目前不再提供该插件的任何获取渠道。

 

目前已有其他更新版插件覆盖该插件功能，推荐使用新插件：Echarts图表集成插件

 

 

1. 概述

1.1 版本

报表服务器版本	插件版本
11.0	V1.0

1.2 应用场景

ECharts 是一个基于 JavaScript 的开源可视化图表库。在使用 FineReport 时，当基础图表的通用配置不足以满足用户需求时，用户可安装「echarts图表插件」通过代码自定义个性化图表。

且 FineReport 在支持用户使用 ECharts 开源接口的同时，也支持引用模板中的数据集，实现参数传递、与其他组件交互等功能，帮助用户在 FineReport 中更好的运用可视化图表。

 

1.3 功能简介

• 使用该插件需对 ECharts 的使用方法有一定了解，且有一定的 JS 基础

• 普通报表、聚合报表以及决策报表中任何插入图表的元素，均支持插入「ECharts图表」

• 支持将模板中的数据集转化为可直接在 ECharts 中使用的 JSON 数据，再通过 getData() 引用

• 支持参数传递、图表交互等功能

• 不支持导出

• 不支持移动端

2. 插件介绍

2.1 插入图表

安装插件后，在图表类型中会多出一个「ECharts图表」，插入方式和插入其他内置图表的方式相同。例如：

• 普通报表

 

• 决策报表

 

2.2 图表配置

ECharts图表 的「配置」包含两个功能：添加数据结构 和 代码编辑器。如下图所示：

 

2.2.1 添加数据结构

1）添加数据结构时可选择添加「二维数组结构」或「树形结构」，根据选择的结构自动将引用的数据集转化为 ECharts 可直接使用的 JSON 数据，在代码编辑器中通过 getData() 引用。

• 二维数组结构支持选择计算方式为「汇总计算」或「明细计算」

• 树形结构按层级划分，支持配置不同层级的数据。

注：树形结构节点的数值字段不是必填项，可以不设置；若最后一层的数值设置了字段，其余层级的数值则按照最后一层的数值汇总得来。

2）支持添加多个结构，每个结构可选择不同的数据集，添加的数据结构名称默认为 data+数字，且不支持修改。

添加的数据结构显示在面板中，鼠标悬浮时，右侧出现几个按钮，分别是：查看数据、编辑和删除。

点击「查看数据」可查看数据集被转化之后的 JSON 数据，例如一个二维数组结构，查看数据如下图所示：

2.2.2 代码编辑器

代码编辑器支持对数据进行预处理、调用 FineReport 的图表接口引用参数、对 ECharts 图表的配置项进行编辑等，运行代码后可预览图表效果；点击右上角「去ECharts官网调试」可进入其官网示例调试界面。

新建 ECharts 图表时，打开代码编辑器默认有一个示例，如下图所示：

2.3 效果预览

ECharts 图表支持除了「移动端预览」之外的所有预览方式，在浏览器端预览的效果与代码编辑器中预览的效果一致。例如默认的示例图表预览效果如下：