文章目录
如何在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 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);