【帆软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(doc