如何在FineReport中使用Echarts

如何在FineReport中使用Echarts

1. 下载 Echarts.js

官网下载：Apache ECharts
或者 gitee 下载

2. 新建决策报表

在决策报表中，添加一个「标签」控件 和 一个「报表块」组件，如下图所示：

3. 引用 Echarts.js

服务器 > 服务器配置 > 引用JavaScript，选择Echarts.js所在路径：

4. 添加「初始化后」事件

给「标签」控件添加「初始化后」事件：

代码如下：

// 必须延时执行，否则报错
setTimeout(function() {
	// 清空标签控件里的内容
	$("div[widgetname=LABEL0]").empty();

	// 往标签控件里添加div，指定id
	$("div[widgetname=LABEL0]").append("<div id='main'></div>");
	var main = document.getElementById('main');

	// 用于使 Echarts 自适应高度和宽度,通过标签控件计算 DOM 容器的高宽
	var resizeMapContainer = function() {
		main.style.width = $("[widgetname='LABEL0']").width() + 'px';
		//main.style.width = $("[widgetname='LABEL0']").width()*0.98 + 'px';
		main.style.height = $("[widgetname='LABEL0']").height() + 'px';
	};

	// 初始化容器的高宽
	resizeMapContainer();

	// 基于准备好的Dom，初始化echarts实例
	var myChart = echarts.init(main);

	// 指定图表的配置项和数据
	var option = {
		title: {
			text: '带背景色的柱状图'
		},
		tooltip: {},
		xAxis: {
			type: 'category',
			data: category
		},
		yAxis: {},
		series: [{
			type: 'bar',
			data: value,
			showBackground: true,
			backgroundStyle: {
				color: 'rgba(180, 180, 180, 0.2)'
			}
		}]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);

	// 监控窗口大小变化
	window.addEventListener("resize", function() {
		// 重置容器高宽
		resizeMapContainer();
		myChart.resize();
	});

}, 500);

代码说明： category 和 value 是传入的参数，引用报表块中的单元格数据绘制图表，数据类型是数组。

5. 利用「报表块」处理数据

echarts 不能直接使用FR的数据集，有个折中的办法是，先通过「报表块」获取数据集中相应数据列的数据，然后在「标签」控件的「初始化后」事件中，以参数形式传入数据。

引用报表块中的单元格数据格式为： report名称~单元格名称 如引用 report0 中 A1 单元格的数据就可以写 report0~A1。

echarts 中使用的数据是以数组的形式组织起来的，报表块在获取数据列时应设置成 列表 且 不扩展：

6. 设置「报表块」不可见

「报表块」组件的作用仅是作为连接FR数据集和 echarts 的桥梁，让 echarts 能够使用数据集中数据绘制图表，实现数据集和 echarts 的联通，报表块并不需要在页面中显示。

7. 预览效果

8. 其他

8.1 Echarts 使用

8.1.1 定时更新数据

以水球图为例：

代码如下：

setTimeout(function() { //延时执行
	//清空标签控件里的内容 
	$("div[widgetname=LABEL1]").empty();

	//往标签控件里添加div，指定id
	$("div[widgetname=LABEL1]").append("<div id='LABEL1'></div>");
	var main = document.getElementById('LABEL1');

	//用于使 Echarts 自适应高度和宽度,通过标签控件计算 DOM 容器的高宽
	var resizeMapContainer = function() {
		main.style.width = $("[widgetname='LABEL1']").width() + 'px';
		main.style.height = $("[widgetname='LABEL1']").height() + 'px';
	};

	//初始化容器的高宽
	resizeMapContainer();

	// 基于准备好的Dom，初始化echarts实例
	var myChart = echarts.init(main);

	var b = [0.1];

	// 指定图表的配置项和数据
	var option = {
		title: {
			text: '水球图（定时刷新）'
		},
		series: [{
			type: 'liquidFill',
			data: b
		}]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);

	function updateData(a) {
		a = a + 0.01;
		b.push(a);
		b.shift();
	}

	// 定时更新数据
	setInterval(function() {
		updateData(b[0]);
		myChart.setOption({
			series: [{
				data: b
			}]
		});
	}, 9000);

	// 监控窗口大小变化
	window.addEventListener("resize", function() {
		// 重置容器高宽
		resizeMapContainer();
		myChart.resize();
	});

}, 500);

说明：使用水球图需要引入 echarts-liquidfill.js，特别要注意与 echarts 的版本匹配问题，版本不匹配会出现报错且无法绘制水球图。

下载：echarts-liquidfill.js

echarts 4.9.0 匹配 echarts-liquidfill 2.0.6， echarts 5.0.1 匹配 echarts-liquidfill 3.0.0。

8.1.2 异步加载数据

setTimeout(function() { //延时执行

	// 清空标签控件里的内容 
	$("div[widgetname=LABEL2]").empty();

	// 往标签控件里添加div，指定id
	$("div[widgetname=LABEL2]").append("<div id='LABEL2'></div>");
	var main = document.getElementById('LABEL2');

	// 用于使 Echarts 自适应高度和宽度,通过标签控件计算 DOM 容器的高宽
	var resizeMapContainer = function() {
		main.style.width = $("[widgetname='LABEL2']").width()*0.98 + 'px';
		main.style.height = $("[widgetname='LABEL2']").height() + 'px';
	};

	// 初始化容器的高宽
	resizeMapContainer();

	// 基于准备好的Dom，初始化echarts实例
	var myChart = echarts.init(main);

	var url = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/obama_budget_proposal_2012.list.json';

	// 显示加载动画
	myChart.showLoading();

	// 异步数据加载
	$.get(url, function(data) {
		// 隐藏加载动画
		myChart.hideLoading();

		// 指定图表的配置项和数据
		var option = {
			title: {
				text: '多值轴缩放'
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow',
					label: {
						show: true
					}
				}
			},
			toolbox: {
				show: true,
				feature: {
					mark: {
						show: true
					},
					dataView: {
						show: true,
						readOnly: false
					},
					magicType: {
						show: true,
						type: ['line', 'bar']
					},
					restore: {
						show: true
					},
					saveAsImage: {
						show: true
					}
				}
			},
			//calculable: true,
			legend: {
				data: ['Growth', 'Budget 2011', 'Budget 2012'],
				itemGap: 5
			},
			grid: {
				top: '12%',
				left: '1%',
				right: '10%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: data.names
			}],
			yAxis: [{
				type: 'value',
				name: 'Budget (million USD)',
				axisLabel: {
					formatter: function(a) {
						a = +a;
						return isFinite(a) ?
							echarts.format.addCommas(+a / 1000) :
							'';
					}
				}
			}],
			dataZoom: [{
					show: true,
					start: 94,
					end: 100
				},
				{
					type: 'inside',
					start: 94,
					end: 100
				},
				{
					show: true,
					yAxisIndex: 0,
					filterMode: 'empty',
					width: 30,
					height: '80%',
					showDataShadow: false,
					left: '93%'
				}
			],
			series: [{
					name: 'Budget 2011',
					type: 'bar',
					data: data.budget2011List
				},
				{
					name: 'Budget 2012',
					type: 'bar',
					data: data.budget2012List
				}
			]
		};

		// 使用刚指定的配置项和数据显示图表
		myChart.setOption(option);

	});

	// 监控窗口大小变化
	window.addEventListener("resize", function() {
		// 重置容器高宽
		resizeMapContainer();
		myChart.resize();
	});

}, 500);