在做大屏展示时,碰到帆软自带图表不能满足需求,需要echarts其他图表来满足,一种方法是用网页框去外链图表单页,但这种方法需要开发代码获取数据。
还有一种是用帆软自有功能挂接echarts图表,下面来详细介绍这种方法
1、新建决策报表,在报表内放入标签控件(用于显示图表)、表格控件(用于对接数据)
2、新建数据集
3、在表格中填入数据
JOINARRAY(ds1.select(c), ",")
预览是这样,两个数据都是字符串
把表格设为不可见
4、在标签控件加 初始化后代码,加入两个参数,值为表格里面的字符串ss=report0~a1 ,aa=report0~a2
5、加入以下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(" ")
-
- strs1 = ss[0].split(","); // 将参数转换成数组,根据图表数据格式进行处理
- strs2 = aa[0].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的引入
echarts.common.js 链接
下载文件放到自己目录里初始化引入
同一页面使用多个这种图表注意div id名的变换
成图
外接echarts模板.frm
(23.67 KB, 下载次数: 52, 售价: 10 个F豆)
|