FineReport uses Echarts to draw heat maps

1. FineReport uses Echarts

FineReportIt supports the use Echartsof to expand the chart. This article is based on FineReportthe use of Echartsplug-ins to draw heat maps.

The data uses FineReportthe built-in 销量table, using 产品and 销售员as x、ythe data, sales as the value, the table data is as follows:

insert image description here

The effect is as follows:

insert image description here

2. Install the Echarts plugin

insert image description here

2. Database query

Create a new decision report and add a database query:

2.1 Product-number

SELECT
	f.产品,
	ROW_NUMBER() over(order by f.产品) AS  orderNo
FROM
	( SELECT DISTINCT 产品 FROM 销量 ) f ORDER BY 产品

insert image description here

2.2 Salesperson-Number

SELECT
	f.销售员,
	ROW_NUMBER() over(order by f.销售员)  orderNo
FROM
	( SELECT DISTINCT 销售员 FROM 销量 ) f ORDER BY 销售员

insert image description here

2.3 Product-Salesperson-Sales

SELECT
	f.产品,
	f1.orderNo AS n1,
	f.销售员,
	f2.orderNo AS n2,
	f.su 
FROM
	(( SELECT 产品,销售员, SUM( 销量 ) AS su FROM 销量 GROUP BY 产品,销售员 ) f
	INNER JOIN ( SELECT f.产品, ROW_NUMBER ( ) over ( ORDER BY f.产品 ) orderNo FROM ( SELECT DISTINCT 产品 FROM 销量 ) f ) f1 ON f.产品 = f1.产品)
	INNER JOIN (SELECT
	f.销售员,
	ROW_NUMBER() over(order by f.销售员) orderNo
FROM
	( SELECT DISTINCT 销售员 FROM 销量 ) f) f2 ON f.销售员 = f2.销售员

insert image description here

3. Heat map configuration

Drag Echartsthe diagram into the design area:

insert image description here
Click on Echartsthe chart to modify the name:

insert image description here

Double-click Echartsthe chart to add data structures in the configuration, here are three, corresponding to the above three database queries:

insert image description here

data1

insert image description here

data2

insert image description here

data3

insert image description here

Open the code editor, use Echarts apito get the above data, and draw it in the chart:

insert image description here

The specific code is as follows:

var x = getData('data1');
x.splice(0, 1);

var y = getData('data2');
y.splice(0, 1);

var data = getData('data3');
data.splice(0, 1);

data = data.map(function (item) {
    
    
    return [item[1]-1, item[0]-1, item[2] || '-'];
});

option = {
    
    
    tooltip: {
    
    
        position: 'top'
    },
    animation: false,
    grid: {
    
    
        height: '50%',
        top: '10%'
    },
    xAxis: {
    
    
        type: 'category',
        data: x,
        splitArea: {
    
    
            show: true
        }
    },
    yAxis: {
    
    
        type: 'category',
        data: y,
        splitArea: {
    
    
            show: true
        }
    },
    visualMap: {
    
    
        min: 100,
        max: 800,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        bottom: '15%'
    },
    series: [{
    
    
        name: 'Punch Card',
        type: 'heatmap',
        data: data,
        label: {
    
    
            show: true
        },
        emphasis: {
    
    
            itemStyle: {
    
    
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

Finally, click preview to see the effect:

insert image description here