如何在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)