组件解析

2025年2月25日大约 3 分钟

index.js 规范

define(['require', 'exports', 'echarts'], function (require, exports, echarts) {
  'use strict';
  return {
    render: function (widget, theme, customStyle, filterParam, queryParam) {},
    update: function (widget, theme, customStyle, filterParam, queryParam) {},
    resize: function (width, height) {},
    destroy: function () {}
  };
});

render(widget, theme, customStyle, filterParam)： render 为默认渲染入口方法，当组件被初始化后，组件渲染方法被调用。
参数：
- widget：组件对象。具体说明详见widget参数说明。
- theme：图表主题对象。
- customStyle：全局样式。
- filterParam：过滤参数。
- queryParam：查询参数。

注意

当全局config.json中配置了handler参数，则渲染入口方法将调用handler配置的方法。

update(widget, theme, customStyle, filterParam)：当组件配置属性改变后，将调用update()方法。
参数：
- widget：更新后的组件对象。
- theme：更新后主题对象。
- customStyle：更新后全局样式。
- filterParam：更新后过滤参数。
- queryParam：更新后查询参数。
resize(width, height)：当组件调整大小时调用。
参数：
- width：调整后的宽度。
- height：调整后的高度。
filter(widget, param)：组件数据为自定义时，并设置数据响应，当事件触发改组件数据响应时调用。
参数：
- widget：更新后的组件对象。
- param：绑定的变量及变量值。

{
    "value": "值"
}

destroy：当组件被销毁时调用。

可调用方法

$container

自定义组件的 DOM 元素

this.$container();

$emit(event_name, value)

触发当前实例上的事件。

event_name：事件名
value：传递的值

事件名为：

finish：当组件渲染完成后调用。

this.$emit('finish', true);

注意

自定义组件必须在组件渲染完成后调用此方法，返回组件是否渲染完成。

event-vars：当组件配置了数据交互字段，在自定义组件事件触发后调用此事件向变量池中推送变量值。传递的值为绑定的字段名：实际值。

this.$emit('event-vars', { fieldName: 'value' });

event-node：当自定义组件中事件支持节点编程，在自定义组件事件触发后执行此事件，触发节点编程执行。传递的值为事件名：抛出数据。

this.$emit('event-node', { click: data });

drilldown：当组件支持上卷下钻，在上卷下钻时触发。

this.$emit('drilldown', filterParam, widget);

$get(name)

获取工具实例。

http： http 实例。

this.$get('http')
  .get('/api/data')
  .then((data) => {
    console.log(data);
  });

lazy：懒加载服务。

this.$get('lazy')
  .load(['script.js', 'style.css'])
  .then(() => {});

isDesign：是否设计器。

this.$get('isDesign');

download：素材库中图片下载地址。

this.$get('download') + '?id=TJ206883c9d36b40df9dd9c3312ecd77';

{
    "id": "TJ9d36f39bc8c6405e8b0a20242703ee",  // 组件id
    "name": "pie-progress",  // 组件名称
    "type": "echarts",       // 组件类型
    "title": "饼图进度条",     // 组件标题
    "width": 500,            // 组件宽度
    "height": 500,           // 组件高度
    "x": 257,                // 组件离容器左侧距离
    "y": 549,                // 组件离容器上侧距离
    "orderNo": 1,            // 顺序号
    "visualId": "TJdef114b37e3f46ae86b8bc00ef5ae1",  // 大屏id
    "option": {   // 与config.json中配置的option一一对应
        "color": [
            "#30d2fd",
            "#fff",
            "rgba(255,255,255,.2)"
        ],
        "tab": {
            "series": [
                {
                    "formatter": "{c}",
                }
            ]
        },
        "title": {
            "itemGap": 10,
            "link": "",
            "padding": 5,
            "show": true,
            "subLink": "",
            "subtext": "",
            "subtextStyle": {
                "fontSize": 12,
                "fontWeight": "normal"
            },
            "text": "标题",
            "textStyle": {
                "fontSize": 18,
                "fontWeight": "bold"
            },
            "top": "top"
        }
    },
    "data": {
        "id": "TJbe52de7795ac40b5bcc26b5dab4917",  // 数据id
        "dataType": "static",       // 数据类型
        "datasetId": "",            // 数据资源id
        "objectData": [             // 静态数据或数据资源查询出的数据
            {
                "data": 38,
                "max": 100
            }
        ],
        "dataAnalysis": {                     // 数据匹配
            "data": { 
                "field": [                    // 匹配字段
                    { 
                        "fieldAlias": "data", // 字段别名
                        "fieldName": "data"   // 字段名
                    }
                ], 
                "name": "进度值",             // 匹配名称
                "template": false            // 模板
            },
            "max": {
                "field": [
                    {
                        "fieldAlias": "max",
                        "fieldName": "max"
                    }
                ],
                "name": "最大值",
                "template": false
            }
        },
        "autoRefresh": false,   // 是否自动刷新
        "refreshSecond": 1,     // 刷新间隔时间，单位(秒)
        "rowLimit": "1"         // 默认查询条数
    },
     "interact": {
         "event": [   // 交互事件
             {
                 "name": "数据改变事件",  // 事件名称
                 "enable": true,        // 是否启用事件
                 "filters": [           // 绑定字段
                     {
                         "field": "fieldName",  // 绑定字段名
                         "variable": "value"    // 绑定到变量名
                     }
                 ]
             }
         ],
          "filters": [                 // 数据响应
              { 
                  "field": "DEPID",     // 绑定字段名
                  "variable": "value"   // 绑定的变量名
              }
         ]
     }
}

组件解析

index.js 规范

可调用方法

$container

$emit(event_name, value)

$get(name)

widget 参数说明