自由网页组件API文档(Cosmo++ FWP Docs)

Cosmo Api

cosmo对象为全局对象,包含属性、方法如下:

data


  • 描述: 此方法提供用户访问数据源的能力。
  • 类型: Function
  • 变量:
    {
        key:'',                         // 数据库连接名称
        sql:'',                         // 要执行的SQL语句
        async:false                     // 是否异步请求,默认为false,只接受布尔类型,否则当作false
    }

或者

    {
        name:'',                        // 数据源名称
        async:false                     // 是否异步请求,默认为false,只接受布尔类型,否则当作false
    }
  • 实例:
    $(function() {
        var case1 = cosmo.data({
            sql: 'select * from table',      // 要执行的SQL语句
            key: 'orcl'                     // 数据库连接名称(与添加数据源时选择的连接名称一样)
        });
        // 此处会阻塞主线程执行直到返回数据
        console.log(case1);

        var case2 = cosmo.data({
            name: '数据源名称'                // 数据源名称
        });
        // 此处会阻塞主线程执行直到返回数据
        console.log(case2);
        
        var case3 = cosmo.data({
            sql: 'select * from table',      // 要执行的SQL语句
            key: 'orcl',                     // 数据库连接名称(与添加数据源时选择的连接名称一样)
            async: true                      // 异步请求数据
        });
        // 此处不会阻塞主线程执行
        console.log(case3);
    });

mongodb


  • 描述: 此方法提供用户访问mongodb数据源的能力。
  • 类型: Function
  • 变量:
    {
        "dbKey": "",                    //数据库key
        "tableName": "",                //tableName:表名
        "sql": ""                       //条件sql
    }

或者

    {
        "dbKey": "",                    //数据库key
        "tableName": "",                //tableName:表名
        "sql": ""                       //条件sql
        async:false                     // 是否异步请求,默认为true,只接受布尔类型
    }
  • 实例:
    $(function() {
        var case1 = cosmo.mongodb({
           "dbKey": "mongo142",                 //数据库key
           "tableName": "t_user",               //tableName:表名
           "sql": "{name : {$gte : 100}}",      //条件sql
           "async":false
        });
        // 此处会阻塞主线程执行直到返回数据
        console.log(case1);
        
        var case2 = cosmo.mongodb({
           "dbKey": "mongo142",                 //数据库key
           "tableName": "t_user",               //tableName:表名
           "sql": "{name : {$gte : 100}}",      //条件sql
           "async":true
        });
        // 此处不会阻塞主线程执行
        console.log(case2);
    });

Echarts Api


echarts对象为全局对象,是Echarts提供的,在此基础上我们扩展了一些易于使用的属性、方法如下:

tooltip


  • 描述: 此方法提供用户快速添加已有图表tooltip轮播的能力。
  • 类型: Function
  • 变量:
    // 渲染图表的dom节点id
    id:'',          可以传单个id,也可以传“,”逗号分隔开的字符串
    {
        interval    轮播时间间隔,单位毫秒,默认为2000
        loopSeries  boolean类型,默认为falsetrue表示循环所有series的tooltip,false则显示指定seriesIndex的tooltip
        seriesIndex 默认为0,指定某个系列(option中的series索引)循环显示tooltip,当loopSeries为true时,从seriesIndex系列开始执行
        updateData  自定义更新数据的函数,默认为null;用于类似于分页的效果,比如总数据有20条,chart一次只显示5条,全部数据可以分4次显示
    }
  • 实例:
    $(function() {
        echarts.tooltip('cmpd119bf', {
            loopSeries: true
        });
    });$(function() {
        echarts.tooltip('cmpd119bf,cmpa13243', {
            loopSeries: true
        });
    });

update


  • 描述: 此方法提供用户快速添加已有图表动态刷新数据源的能力。
  • 类型: Function
  • 变量:
    // 渲染图表的dom节点id
    id:'',          传入图表id,接受以','分隔的id集合
    interval:0      可选变量,轮播时间间隔,单位毫秒,不传或传递非整数不进行轮播
  • 实例:
    $(function() {
        echarts.update('cmpe4a905,cmpa34236',1000);      
    })

使用注意事项

项目使用过程中要注意避免以下几点:

隐式转换


  • 描述: 渲染框架内部对下拉等组件在设置值的时候会将能隐式转换为false的内容忽略。
  • 解决方案: 避免使用会出现隐式类型转换的值如 0,false,空字符串等。

Echarts配置信息保存


  • 描述: Echarts的配置中存在函数的时候函数内部的注释和双引号会导致配置无法正常回读。
  • 解决方案: 在Echarts内的函数内部避免书写注释和双引号,防止配置回读错误。