Echarts Graph Integration Plugin

Version

Application Scenarios

ECharts is an open-source, JavaScript-based library of visualized graphs. When general configurations of basic charts in FineReport cannot meet your needs, you can install the ECharts graph integration plugin to integrate third-party graphs.

In addition to its support for open-source APIs from ECharts, you can also reference datasets in templates, to implement functions like parameter transfer and interaction between widgets, which improves the usability of FineReport charts.

Functions

· Requires you with a certain understanding of how to use ECharts and a certain foundation in JS.

· Supports inserting ECharts graphs for any general reports, aggregation report, and dashboard with inserted charts.

· Supports converting template dataset into JSON data that can be directly used in ECharts, and then referenced through getData() parameter.

· Supports functions such as parameter query, parameter transfer, and chart interaction.

Note:

1. The Parameter Widget only supports transferring parameters through the parameter panel while does not support direct use in cells or the body in dashboards.

2. Export is not supported.

3. Mobile terminal is not supported.

Installing the Plugin

Click com.fr.plugin.chart.echarts-1.0.5.zip to download the plugin.

For details of plugin installation method in designer, see Designer Plugin Management.

For details of plugin installation method in the server, see Server Plugin Management.

Inserting the Graph

After installing the plugin, ECharts Graph will appear in the list of the Chart Type. The way to insert it is the same as inserting other built-in charts.

· General Report

· Dashboard

Configuring the Graph

Configuration of ECharts Graph includes two functions: Add Data Structure and Code Editor.

· Add Data Structure

1. When adding data structures, you can choose to add 2D Array or Tree Structure. According to the selected structure, the referenced dataset will be automatically converted into JSON data that can be directly used by ECharts, and can be referenced through parameter getData() in the code editor.

1. The structure of 2D Array supports selecting the calculation method as Summary or Detailed Calculation.

2. Tree Structure is divided by hierarchy and supports configuring data for different levels.

Note: The Node Name Value is not a required field and can be left unset; if you set the Node Name Value for the last level, the values of other levels will be summarized according to that the last level.

2. You can add multiple structures and select different dataset for each structure. The added data structure name is default to data + {number}, and cannot be modified.

The added data structure is displayed in the panel. When the mouse hovers over it, several buttons appear on the right side, which are: View Data, Edit, and Delete.

Click View Data to view the JSON data after dataset is transferred, such as the 2D Array structure.

· Code Editor

1. In Code Editor, you can preprocess data, call FineReport chart interface to reference parameters, edit configuration items for ECharts graph and so on. After running the code, you can preview the effect.

2. Click Debug on Echarts website in the upper right corner to enter the example debugging interface in Echarts's official website.

3. When you create a ECharts graph, there is a default example shown in the code editor.

4. For plugin of version V 1.0.2 and later versions, you can drag and resize the code editor interface, and the code area and preview area can also be dragged to adjust the proportions.

Demonstration

You can select preview methods except for Mobile Preview in ECharts graphs , and the preview effect in the browser is consistent with the preview effect in the code editor. For example, the default demonstration of the sample chart is as follows:

Notes

When opening the designer, if the default template contains ECharts graphs, an error message may appear.

This may be because when you open the designer, the plugin market has not been loaded successfully while the template has been loaded. In order to protect the template from being damaged, this error message will appear. After clicking OK, you need to wait a few seconds and click Retry. If there are no other issues, the template will return back to normal.