因公司需求需要在帆软中用桑基图来展示数据的流向，于是想通过整合echarts图表来完成，这样后续如果还需要用到其他样式的图表也更容易制作。
准备工作：
1.准备好数据来源，我这次展示的为Oracle数据库，哪一种数据库无所谓反正是通过数据集的方式来拿的。
2.引入echarts图表的js文件(重要，不引入的话是没有echarts图表效果的)。
展示最终效果
下面开始制作步骤：
打开设计器->点击左上角服务器->服务器配置
点击引用javascript->设置绝对路径->点击测试链接查看结果->无误后点击确定
路径地址：https://cdnjs.cloudflare.com/aja ... .5.3/echarts.min.js
因为我这边是测试所以用的绝对路径，正常是走磁盘文件这个操作的，在网上下好echarts的js文件放入FineReport_10.0\webapps\webroot\scripts目录下的
这样echarts就配置好了，然后开始处理数据，非常简单的一张表，4条测试数据。
建表语句：
CREATE TABLE "DW"."PMDTLQRY" (
"GOODSNAME" VARCHAR2(150 BYTE) ,
"GOODSAMOUNT" NUMBER(11,2) ,
"CUSNAME" VARCHAR2(150 BYTE) ,
"PRONAME" VARCHAR2(150 BYTE) ,
"CITNAME" VARCHAR2(150 BYTE)
)
桑基图nodes数组sql: union函数可以去除重复，桑基图nodes数据是不允许有重复数据的会报错请注意。
select GOODSNAME as name from pmdtlqry
UNION
select PRONAME as name from pmdtlqry
UNION
select CITNAME as name from pmdtlqry
UNION
select CUSNAME as name from pmdtlqry
桑基图links数组sql： links数据不允许同市流通(也就是北京市流向北京市)，4个直辖市还需要特殊处理，Oracle可以使用not regexp_like(PRONAME,'北京市|天津市|上海市|重庆市')来过滤
select GOODSNAME as source,PRONAME as target,SUM(GOODSAMOUNT) as value from pmdtlqry GROUP BY GOODSNAME,PRONAME
UNION
select PRONAME as source,CITNAME as target,SUM(GOODSAMOUNT) as value from pmdtlqry GROUP BY PRONAME,CITNAME
UNION
select CITNAME as source,CUSNAME as target,GOODSAMOUNT as value from pmdtlqry
准备工作完成，下面开始制作最终图表：
打开设计器，新建一个决策报表，拖入绝对画布块->拖入报表块->拖入一个label控件（我这个label控件被我拉大了所以看着不是很明显）
添加2个数据集，sql在上面可自行复制（注意我的是Oracle数据库）
将字符串数据放入报表块中
links单元格关闭扩展方向为不扩展
links单元格元素的中的数据设置项更改为列表，千万不能用分组，这会处理掉重复数据导致后面图表展示出问题
返回表单，点击label控件，为其添加一个初始后事件
重点来了：echarts方法的参数就是通过这里来和报表块交互的，参数名可随意定制，后面的值则是写公式report0~A1，report0~B1，report0~C1，report0~D1
这样我们就拿到了报表块的字符串数据。
js事件完整代码，整体框架是固定的写法
setTimeout(function (){ //延时执行
$("div[widgetname=LABEL0]").empty(); //清空标签控件里的内容 LABEL0 标签控件名
$("div[widgetname=LABEL0]").append("<div style='width:100%;height:100%;' id='echa'></div>"); //往标签控件里添加div，指定id
var myChart = echarts.init(document.getElementById("echa"));
//指定echarts容器，echa 为新添加div的id，echarts限制必须用 document.getElementById(" ")
定义2个数组容器
var nodes = [];
var links = [];
//循环从参数名ss中拿到nodes数据
for(var i = 0; i < ss.length; i++) {
var ns=new Object(); //定义一个对象放数据
ns.name=ss;
nodes.push(ns); //将对象push进nodes数组
}
//循环从参数名q，w，e中拿到links数据
for(var i = 0; i < q.length; i++) {
var qs=new Object();
qs.source=q;
qs.target=w;
qs.value=e;
links.push(qs); //将对象push进links数组
}
console.log(nodes);
console.log("----------------");
console.log(links);
//以下为echarts正常配置
option = {
title: {
text: 'Sankey Diagram'
},
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
data:nodes, //上面的nodes数组
links:links, //上面的links数组
focusNodeAdjacency: true,
levels: [{
depth: 0,
itemStyle: {
color: '#fbb4ae'
},
lineStyle: {
color: 'source',
opacity: 0.6
}
}, {
depth: 1,
itemStyle: {
color: '#b3cde3'
},
lineStyle: {
color: 'source',
opacity: 0.6
}
}, {
depth: 2,
itemStyle: {
color: '#ccebc5'
},
lineStyle: {
color: 'source',
opacity: 0.6
}
}, {
depth: 3,
itemStyle: {
color: '#decbe4'
},
lineStyle: {
color: 'source',
opacity: 0.6
}
}],
lineStyle: {
curveness: 0.5
}
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}, 500);
到此完成了数据绑定，打开网页预览最终结果，js事件中标红的是我用来处理数据的，其他的写法都是固定的，更多echats图表样式只需要更改option代码就好了，echarts官方里有详细的代码
|
来自 17#
一下打开了思路。感谢分享！
