bi-custom-chart-demo/src/main/resources/com/finebi/plugin/custom/component/demo.js

function render(
    data,
    config,
    saveSessionCallback,
    // 暂时没用
    closeSessionCallBack,
    extensionCallBack
) {
    const {
        // 数据，若横纵轴多指标时图表属性有维度字段，dataModels 为以图表属性为分组的多组数据
        dataModels,
        // 横纵轴拖入字段的维度 id
        dataMapping,
        // 图表属性拖入字段的维度 id
        chartAttrMapping,
        // 图表点击值
        clicked
    } = data;

    const {
        // 组件 id
        widgetId,
        // 全局样式中图表最终样式
        globalStyles,
        // 图表属性配置所选值
        chartAttr,
        // 图表样式配置所选值
        chartStyle,
        // 图标属性中使用形状时的图标映射
        symbolIconMap,
        // 自定义保存的值(saveSessionCallback)
        customConfig
    } = config;

    const refs = {};

    // demo 仅使用表格模拟
    BI.createWidget({
        type: 'bi.vertical',
        element: '#container',
        items: [
            {
                type: 'bi.label',
                text:
                    'dataMapping(横纵轴拖入字段的维度 id): ' +
                    JSON.stringify(dataMapping)
            },
            {
                type: 'bi.label',
                text:
                    'chartAttrMapping(图表属性拖入字段的维度 id): ' +
                    JSON.stringify(chartAttrMapping)
            },
            {
                type: 'bi.label',
                text: 'widgetId(组件 id): ' + JSON.stringify(widgetId)
            },
            {
                type: 'bi.label',
                text:
                    'globalStyles(全局样式中图表最终样式): ' +
                    JSON.stringify(globalStyles)
            },
            {
                type: 'bi.label',
                text:
                    'chartAttr(图表属性配置所选值): ' +
                    JSON.stringify(chartAttr)
            },
            {
                type: 'bi.label',
                text:
                    'chartStyle(图表样式配置所选值): ' +
                    JSON.stringify(chartStyle)
            },
            {
                type: 'bi.label',
                text:
                    'symbolIconMap(图标属性中使用形状时的图标映射): ' +
                    JSON.stringify(symbolIconMap)
            },
            {
                type: 'bi.label',
                text:
                    'customConfig(自定义保存的值(saveSessionCallback)): ' +
                    JSON.stringify(customConfig)
            },
            {
                type: 'bi.vertical',
                items: dataModels.map(dataModel => {
                    const { fields, colData } = dataModel;

                    return {
                        type: 'bi.vertical',
                        items: [
                            {
                                type: 'bi.vertical_adapt',
                                items: fields.map(field => {
                                    return {
                                        type: 'bi.label',
                                        text: field.name,
                                        rgap: 5
                                    };
                                })
                            },
                            {
                                type: 'bi.vertical_adapt',
                                items: colData.map((data, colIndex) => {
                                    // 维度id
                                    const dId = fields[colIndex].id;

                                    return {
                                        type: 'bi.vertical',
                                        items: data.map((text, dataIndex) => {
                                            const key =
                                                '' + colIndex + dataIndex;

                                            // 构造当前联动点击值对象
                                            const value = [];
                                            for (
                                                let i = 0;
                                                i <= colIndex;
                                                i++
                                            ) {
                                                // 当前维度和之前维度的id及对应值
                                                value.push({
                                                    dId: fields[i].id,
                                                    text: colData[i][dataIndex]
                                                });
                                            }
                                            // 联动点击值对象
                                            const currentClicked = {
                                                dId,
                                                value
                                            };

                                            return {
                                                type: 'bi.label',
                                                height: 30,
                                                rgap: 5,
                                                text,
                                                cls: isClicked(
                                                    clicked,
                                                    currentClicked
                                                )
                                                    ? 'bi-border'
                                                    : '',
                                                ref: ref => {
                                                    refs[key] = ref;
                                                },
                                                handler: () => {
                                                    BI.each(refs, (_, ref) => {
                                                        ref.element.removeClass(
                                                            'bi-border'
                                                        );
                                                    });
                                                    refs[key].element.addClass(
                                                        'bi-border'
                                                    );

                                                    // 触发联动
                                                    extensionCallBack(
                                                        'click',
                                                        currentClicked
                                                    );

                                                    // 模拟自定义保存值，可以是任意值，通过 customConfig 原样返回
                                                    saveSessionCallback({
                                                        saveValue:
                                                        currentClicked
                                                    });
                                                }
                                            };
                                        })
                                    };
                                })
                            }
                        ]
                    };
                })
            }
        ]
    });
}
// 注册渲染方法
new BIPlugin().init(render);

// 判断当前数据是否为点击值
function isClicked(clicked, currentClicked) {
    function valueEq(v1, v2) {
        if (v1 === v2) {
            return true;
        }
        if (!BI.isArray(v1) || !BI.isArray(v2)) {
            return false;
        }
        if (v1.length !== v2.length) {
            return false;
        }

        return !BI.some(v1, (i, v) => {
            const textEq = BI.isNull(v.text)
                ? BI.isNull(v.text) !== BI.isNull(v2[i].text)
                : v.text !== v2[i].text;

            return v.dId !== v2[i].dId || textEq;
        });
    }

    if (BI.isNull(clicked) || BI.isNull(currentClicked)) {
        return false;
    }

    return (
        clicked.dId === currentClicked.dId &&
        valueEq(clicked.value, currentClicked.value)
    );
}