ECharts Graph Referencing Template Dataset

Version

Application Scenarios

When using the ECharts graph to reference template’s dataset in FineReport, you need to first add a data structure and then use getData('name') in the code editor to call the data. name refers to the name of the data structure.

This article will use a simple example to demonstrate: Extract the product field and sales field of the Sales table in FRDemo, convert them into a two-dimensional array, and then call to generate a chart. The expected effect is shown in the following figure:

Installing the Plugin

To download the plugin, click ECharts Graph Integration Plugin.

For details about installing designer plugins, see Designer Plugin Management.

For details about installing server plugins, see Server Plugin Management.

Preparing Data

Click File > New General Report in the upper left corner of the designer to create a database query with the SQL statement: SELECT * FROM Sales.

Designing the Report

1. Inserting the Chart

Select a range of cells, merge the cells, and then click Insert Chart to select ECharts Graph. As is shown below:

2. Adding Data Structure

Select the chart, click Cell Element > Configuration, and add a 2D Array structure.

Select dataset ds1, keep the calculation method as Summary, add a Product field for String, add a Sales_Volume field or Numeric, and choose sum.

After completing the configuration, click the Finish button at the top to return to the data structure panel. The added data structure will be displayed below, with the default name data1. As is shown below:

3. Editing Code

When you first go to Code Editor, there is an example of a two-dimensional array structure with explanations of basic parameters by default.

In this example, the data needs to be replaced with the data from data1 referenced by getData(), as shown in the following code:

var TABLE_DATA = getData('data1');
option = {
  legend: {},
  tooltip: {},
  dataset: {
    source: TABLE_DATA,
  },
  xAxis: { type: "category" },  
  yAxis: {},
  series: [{ type: "bar" }],
};

After entering the code, click the Run button. If the code is correct, the corresponding chart will appear on the right. Click OK to save the code and exit. As is shown below:

Previewing the Effect

Save the report, click Preview, and the effect is consistent with the preview in the code editor. As is shown below:

Note: Mobile devices are not supported.

To download the template, click ECharts1.cpt