在表单虚拟字段渲染一个图表，并且可以根据条件筛选图表数据

在表单虚拟字段渲染一个图表，并且可以根据条件筛选图表数据

介绍

在表单虚拟字段渲染一个图表，并且可以根据表单上某个字段值改变并筛选图表数据

详情

1.根据已有数据源创建一个普通图表，并配置好查询参数

2.在表单中加虚拟字段，并且写事件将图表渲染出来

const {
    $func,   // 功能对象
    $form,   // 功能表单对象
    $display,// 展示字段对象
    field,   // 字段详细配置
    model,   // 表单数据
    value,   // 当前值
} = EventOptions;
const admin = JE.useAdmin();
return (dom,options)=>{
    // 图表配置
    const chartOptions = {
        code:'DCTXSJY1204',// 图表编码
        style:'height:300px;',// 高度
        hideSearch:'left',// 隐藏查询区域
        params: {
                TEST_QJLX_CODE: model.TEST_QJLX_CODE,
        } // 默认参数，可以配合hideSearch使用// 默认参数
    };
    return admin?.emitMicroEvent(
        'JE_PLUGIN_CHART_MODULE',
        'chart-renderer',
        dom,
        chartOptions
    ).then((chartref)=>{
        $form.$chart = chartref;
    })
}

3.表单字段值改变中编写事件，值改变就刷新图表,当前案例使用的是请假类型字段

const {
    $func, // 功能对象
    field, // 字段详细配置
    model, // 表单数据
    type,  // 类型：column(列表字段)|form(表单字段)
    $form, // 功能表单对象(表单编辑起效)
    $grid, // 功能列表对象(列表编辑起效)
    value, // 当前值
    valueOptions, // 当前值对应的选项数据
} = EventOptions;

//值改变事件加载图表，条件是请假类型
$form.$chart?.value.load({TEST_QJLX_CODE:value});

4.表单激活事件中，有值的情况下进表单刷新图表

/**
 * 功能每次进入到表单界面后,全会触发本事件
 */
const {
    $func, // 功能对象
    $form, // 功能表单对象
} = EventOptions;
//获取请假类型
const TEST_QJLX_CODE = $form.getValues('TEST_QJLX_CODE');
//传参并刷新图表 如果没有加载的情况下 可以加延时
$form.chart?.value.load({TEST_QJLX_CODE:TEST_QJLX_CODE});