一、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)'
}
}
}]
};
最后点击预览就可以看到效果了：
