FineReport 使用 Echarts 绘制热力图

一、FineReport 使用 Echarts

FineReport 支持使用 Echarts 进行图表的扩充，本文基于 FineReport 使用 Echarts 插件绘制热力图。

数据使用 FineReport 自带的销量表 ，使用 产品 和 销售员 作为 x、y 数据，销量作为值，表数据如下：

效果如下：

二、安装 Echarts 插件

二、数据库查询

新建一个决策报表，添加数据库查询：

2.1 产品-编号

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

2.2 销售员-编号

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

2.3 产品-销售员-销量

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.销售员复制

三、热力图配置

将 Echarts 图表拖入设计区：

点击 Echarts 图表修改名称：

双击 Echarts 图表，在配置里添加数据结构，这里有三个，分别对应上面的三个数据库查询：

data1

data2

data3

打开代码编辑器，使用 Echarts api 获取上面的数据，并画在图表中：

具体代码如下：

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)'
            }
        }
    }]
};复制

最后点击预览就可以看到效果了：