【帆软FR】Echarts图表方案

一、导图

二、准备工作

三、通用方法介绍

1、方案1—Label标签

2、方案2—报表块

3、方案3—网页框

4、方案4—Echarts插件

四、Echarts联动方案

五、附件

一、导图

二、准备工作

1、安装插件
地址：https://market.fanruan.com/plugin/567c8601-d041-4981-8e8b-f658a4ef8b69

2、文件位置
Echarts相关文件放置工程目录下，比如放至../webroot下。

见文末百度云：echarts.rar

三、通用方法介绍

1、方案1—Label标签

（1）模版设置说明
js可以获取report0中数据集内容，将数据传到echarts中显示效果；此外，在使用的时候要引用Echarts的js文件

（2）初始化JS案例

//案例中用的label的名字为Label0，要用大写
setTimeout(function (){
$("div[widgetname=LABEL0]").empty();
$("div[widgetname=LABEL0]").append("<div style='width:100%;height:100%;' id='echa'></div>"); //上述标签中的id为echa
var myChart = echarts.init(document.getElementById("echa"));//引入报表快的数据，并转换为数组格式
strs1 = ss[0].split(",");
strs2 = aa[0].split(",");//以下需要添加指定图表的配置项和数据,可以直接进行替换
option = {xAxis: {type: 'category',data: strs1},yAxis: {type: 'value'},series: [{data: strs2,type: 'line'}]
};// 使用刚指定的配置项和数据显示图表。if (option && typeof option === "object") {myChart.setOption(option, true);}}, 500);

（3）预览效果

见文末百度云资源：外接echarts模板 (1).frm

2、方案2—报表块

（1）报表块设置
添加html，准备echarts图表用的div块

（2）初始化事件

（3）普通预览JS

setTimeout(function(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main2'));
var count=0;// 指定图表的配置项和数据，可以替换以下内容
var option = {
title: {
text: 'ECharts(报表块)'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: xdata   //x轴数据
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: zdata   //z轴数据
}]
};// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);},1000);（4）数据自动刷新JS
setTimeout(function(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));//记录刷新的次数
var count=0;//获取数据
var sql = "SELECT * FROM 销量 limit 5";
var xdata = FR.remoteEvaluate('=sql("FRDemo","'+sql+'",2)');
var zdata = FR.remoteEvaluate('=sql("FRDemo","'+sql+'",5)');// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts(报表块+数据刷新)'+count
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: xdata
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: zdata
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);var ctimer1 = setInterval(function() {//zdata = FR.remoteEvaluate('ds1.select(val)');
zdata = FR.remoteEvaluate('=sql("FRDemo","'+sql+'",5)');//刷新时获取的数据
++count;option = {
title: {
text: 'ECharts(报表块+数据刷新)'+count
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: xdata   //x轴数据
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: zdata   //z轴数据
}]
};// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);},5000);
},1000);

（5）预览效果

见文末百度云资源：echarts示例.frm

3、方案3—网页框

（1）图表HTML（无参数）
参考图表：https://gallery.echartsjs.com/editor.html?c=xu9Sl6QC5，将生成的HTML文件放到工程中，如上面的echarts1.html，然后设置后引用路径

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>ECharts</title><!-- 引入 echarts.js -->
<script src="echarts/echarts.min.js"></script>
<script src="echarts/echart2.js"></script>
<script src="echarts/echart.js"></script>
<script type="text/javascript" src="echarts/getUrlParam.js"></script>
</head><body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:100% ;position:absolute;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));// 以下需要添加指定图表的配置项和数据,可以直接进行替换option = {backgroundColor: "#38445E",grid: {
left: '12%',
top: '5%',
bottom: '12%',
right: '8%'
},xAxis: {data: ['驯鹿', '火箭', '飞机', '高铁', '轮船', '汽车', '跑步', '步行', ],axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(255, 129, 109, 0.1)',
width: 1 //这里是为了突出显示加上的
}
},
axisLabel: {
textStyle: {
color: '#999',
fontSize: 12
}
}},yAxis: [{
splitNumber: 2,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(255, 129, 109, 0.1)',
width: 1 //这里是为了突出显示加上的
}
},
axisLabel: {
textStyle: {
color: '#999'
}
},
splitArea: {
areaStyle: {
color: 'rgba(255,255,255,.5)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255, 129, 109, 0.1)',
width: 0.5,
type: 'dashed'
}
}
}
],series: [{name: 'hill',type: 'pictorialBar',barCategoryGap: '0%',symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',label: {
show: true,
position: 'top',
distance: 15,
color: '#DB5E6A',
fontWeight: 'bolder',
fontSize: 20,
},itemStyle: {normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(232, 94, 106, .8)' //  0%  处的颜色
},
{
offset: 1,
color: 'rgba(232, 94, 106, .1)' //  100%  处的颜色
}
],
global: false //  缺省为  false
}
},
emphasis: {
opacity: 1
}},data: [123, 60, 25, 18, 12, 9, 2, 1],z: 10}]
};// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

（2）预览效果一

（3）图表HTML（接收参数）
模版设置说明：模版参数val，在网页框中会将值传给url参数value，然后HTML中会用语句UrlParam.paramValues("value")来接收url的value参数值，如下
// 接收url传入的参数
var value = UrlParam.paramValues("value");
var FRdata = []
FRdata.push(value)

（4）参考代码
以水球图为例，图表接收传来的参数后会显示对应的数值

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>ECharts</title><!-- 引入 echarts.js -->
<script src="echarts/echarts.min.js"></script>
<script src="echarts/echart2.js"></script>
<script src="echarts/echart.js"></script>
<script type="text/javascript" src="echarts/getUrlParam.js"></script></head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:100% ;position:absolute;"></div>
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));// 接收url传入的参数
var value = UrlParam.paramValues("value");
var FRdata = []
FRdata.push(value)// 指定图表的配置项和数据var option = {backgroundColor: '#06151D', // 图表大背景title: {text: '测试', // 图表标题textStyle: {fontWeight: 'normal',fontSize: 25, //字号color: 'rgb(0, 207, 233)' //字体颜色}},series: [{type: 'liquidFill',  //调用图表类型radius: '80%',  //水球图半径
color: ['#00CFE9'],  //水球波浪颜色data: FRdata,  // 水球波浪数backgroundStyle: {borderWidth: 5,   //内边框宽度borderColor: '#00CFE9',  //内边框颜色color: '#06151D' //水球内部背景 },label: {normal: {formatter: (value * 100).toFixed(2) + '%',  //显示数值格式textStyle: {fontSize: 50 //显示数值大小}}}}]
}// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

（5）预览效果二

无参数效果见：echart.frm、echarts.html
参数联动效果：echart2.frm、echarts1.html

4、方案4—Echarts插件

（1）label0设置的初始化事件
以箱线图为例

FR.ECharts.create(this,{//三个与箱线图相关的配置文件，可以在附件文件中看到
js:['dms/boxplot.js','sms/boxplot.js','oms/boxplot.js'],//数据集名称为ds2，列名分别为产品类型和销量
ds:{
name:'ds2',
cols:'产品类型,销量'
},//一些图表配置，比如xk是x轴数据，也就是上面列名；vk是y轴的列值
def:{
xk:'产品类型',
vk:'销量',
vName:'销量',
title:'产品类型销量箱线图'
},//clickSeries这个方法就是点击图表时需要执行的方法，name是分类名，series是系列名，value是值
clickSeries:function( name, series, value ){//FR.BaseUtils.linkChart进行超链接，这个超链方法可以是FR图表超链Echarts，Echarts超链FR图表，Echarts超链Echarts、FR图表超链FR图表
FR.BaseUtils.linkChart('chart1',{pt:name});//联动chart1，将点击时name的值传给参数pt
}
});
FR.CTEST = this;（2）引用文件简介
以dms.js为例
;(function() {
FR.BaseUtils.import( 'plugins/dataTools.js', 'js' );
$.extend(FR.ECharts.MAKERS,{
dms_boxplot: function(  options, datas, def  ){//以下是图表配置信息，可以替换
var data = FR.BaseUtils.prepareBoxplotData( datas[def.xk], datas[def.vk] );//本例中def.xk就是'产品类型'，datas[def.xk]就是获取对应列的数据
var xAxis = {
data: data.axisData
};
var series = [];
series.push({
data: data.boxData
});
series.push({
data: data.outliers
});//上述配置好参数后，直接返回就可以用
return {
xAxis:xAxis,
series:series
};
}});
})();

（3）预览效果

附件见：EchartsTest.frm

四、Echarts联动方案

1、准备工作
（1）需要先了解的文档：Label标签方案、报表块方案
（2）按照上述文档设置好，可以预览成功
2、Echarts联动Fr图表
（1）label的初始化事件中增加js

//params是点击时获取的对象，比如点击柱子时有一个对象，可以用params.name获取分类名，用params.series获取系列名，用params.value获取值
myChart.on('click', function (params) {FR.Chart.WebUtils.changeParameter('chart0', {"a": params.name,});});

（2）参考设置

（3）预览效果

3、Fr联动Echarts图表
（1）图表设置动态参数

（2）label接收参数

（3）效果

参考模版：echarts示例2.frm

五、附件

链接：https://pan.baidu.com/s/1vkQ0nhvycFmoiB9mo2eTsw

提取码：7c4s

对你有帮助的话，可以点赞+关注+收藏，更多知识分享持续更新~