在做大屏展示时，碰到帆软自带图表不能满足需求，需要echarts其他图表来满足，一种方法是用网页框去外链图表单页，但这种方法需要开发代码获取数据。
还有一种是用帆软自有功能挂接echarts图表，下面来详细介绍这种方法
1、新建决策报表，在报表内放入标签控件（用于显示图表）、表格控件（用于对接数据）
128625
2、新建数据集
128626
3、在表格中填入数据
JOINARRAY(ds1.select(c), ",")
128627
预览是这样，两个数据都是字符串
128628
把表格设为不可见
4、在标签控件加 初始化后代码，加入两个参数，值为表格里面的字符串ss=report0~a1 ，aa=report0~a2
128629
5、加入以下js代码
setTimeout(function (){ //延时执行
$("div").empty(); //清空标签控件里的内容 LABEL0 标签控件名
$("div").append(""); //往标签控件里添加div，指定id
var myChart = echarts.init(document.getElementById("echa")); //指定echarts容器，echa 为新添加div的id， echarts限制必须用 document.getElementById(" ")
strs1 = ss.split(","); // 将参数转换成数组，根据图表数据格式进行处理
strs2 = aa.split(",");
//以下为echarts正常配置
option = {
xAxis: {
type: 'category',
data: strs1
},
yAxis: {
type: 'value'
},
series: [{
data: strs2,
type: 'line'
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}, 500);
6、保存预览进行调试
注意其他js的引入128630
echarts.common.js 链接
下载文件放到自己目录里初始化引入
同一页面使用多个这种图表注意div id名的变换
128631
成图
128632
128633
129233
129232
增加了关系图示例
setTimeout(function (){
$("div").empty();
$("div").append("");
var myChart = echarts.init(document.getElementById("gxt"));
option = {
// backgroundColor: 'black',
tooltip: {},
animationDurationUpdate: 1000,
animationEasingUpdate: 'quinticInOut',
color:,
series: [
{
type: 'graph',
layout: 'force',
force:{
repulsion:300,
edgeLength:120
},
roam: true,
label: {
normal: {
show: true
}
},
data: [
{
name: '类目一',
symbolSize: 80, //值控制它的面积大小
draggable: true,
category: 0,
itemStyle: {
normal: {
borderColor: '#ff1f31',
borderWidth: 1, //边框粗细
shadowBlur:2,
shadowColor: '#ff1f31',
color: '#ff1f31',
}
}
},
{
name: '类目二',
symbolSize: 55,
itemStyle: {
normal: {
borderColor:'#383afe',
borderWidth: 1,
shadowBlur: 2,
shadowColor: '#383afe',
color: '#383afe',
}
},
category: 1,
},
{
name:'类目三',
symbolSize: 40,
category: 1,
itemStyle: {
normal: {
borderColor: '#5052fe',
borderWidth: 1,
shadowBlur: 2,
shadowColor: '#5052fe',
color: '#5052fe',
}
},
},
{
name:'类目四',
symbolSize: 40,
category: 1,
itemStyle: {
normal: {
borderColor: '#383afe',
borderWidth: 1,
shadowBlur: 2,
shadowColor: '#383afe',
color: '#383afe',
}
},
},
{
name:'类目五',
symbolSize: 40,
category: 1,
itemStyle: {
normal: {
borderColor: '#5052fe',
borderWidth: 1,
shadowBlur: 2,
shadowColor: '#5052fe',
color: '#5052fe',
}
},
},
{
name:'类目六',
symbolSize: 40,
category: 1,
itemStyle: {
normal: {
borderColor: '#383afe',
borderWidth: 1,
shadowBlur: 2,
shadowColor: '#383afe',
color: '#383afe',
}
},
},
{
name:'类目七',
symbolSize: 40,
category: 1,
itemStyle: {
normal: {
borderColor: '#5052fe',
borderWidth: 1,
shadowBlur: 2,
shadowColor: '#5052fe',
color: '#5052fe',
}
},
},
{
name: '类目八',
symbolSize:55,
category: 2,
itemStyle: {
normal: {
borderColor: '#1cc73a',
borderWidth: 1,
shadowBlur: 2,
shadowColor: '#1cc73a',
color: '#1cc73a',
}
},
},
{
name: '类目九',
symbolSize:40,
category: 2,
itemStyle: {
normal: {
borderColor: '#30da4e',
borderWidth: 1,
shadowBlur: 2,
shadowColor: '#30da4e',
color: '#30da4e'
}
},
},
{
name: '类目十',
symbolSize:40,
itemStyle: {
normal: {
borderColor: '#30da4e',
borderWidth: 1,
shadowBlur: 2,
shadowColor: '#30da4e',
color: '#30da4e'
}
},
category: 2,
}],
links: [
{
source: '类目一',
target: '类目二'
},
{
source: '类目一',
target: '类目三',
},
{
source: '类目一',
target: '类目四',
},
{
source: '类目一',
target: '类目五',
},
{
source: '类目二',
target: '类目六',
},
{
source: '类目二',
target: '类目七',
},
{
source: '类目二',
target: '类目八',
},
{
source: '类目二',
target: '类目九',
},
{
source: '类目二',
target: '类目十',
},
{
source: '类目三',
target: '类目十',
},
{
source: '类目三',
target: '类目七',
},
{
source: '类目三',
target: '类目六',
},
{
source: '类目三',
target: '类目四',
}
],
lineStyle: {
normal: {
opacity: 0.9,
width: 4,
curveness: 0
}
},
categories:[
{name: '0'},
{name: '1'},
{name: '2'},
{name: '3'},
{name: '4'}
]
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}, 500);
编辑于 2019-9-27 14:58
编辑于 2019-10-30 09:22
编辑于 2021-3-4 16:08
