在功能操作列打开一个带参的图表

在功能操作列按钮打开带参图表

介绍

在功能操作列按钮打开一个带参的图表

详情

1.创建数据源（这里案例用的是图形数据源），并且配置查询参数，并且查询参数在数据源可以测试成功；

2. 配置查询参数

3.在数据源中测试数据是否查询正常

4. 在图表引擎配置扇形图表，并引入前面建的数据源

5. 配置查询参数

6. 查询效果

7.在功能操作列按钮打开图表

8.事件编写，并且传参

9.打开图表的效果

相关代码

const {
    $func,  // 功能对象
    $grid,  // 功能列表对象
    button, // 按钮对象
    row,    // 行对象，使用row.字段编码, 可以获得字段值。也可做赋值操作。
} = EventOptions;
// 异步事件，支持 await语法，实现同步处理。
const { Modal } = JE.useUi();
const {nextTick,ref} = JE.useVue();
const admin = JE.useAdmin();
const chartContent = () => {
    //获取图表元素
    nextTick(()=>{
        const chartOptions = {
            code: 'DCTXSJY1204',// 图表编码
            style: 'height:300px;',// 高度
            hideSearch: 'left',// 隐藏查询区域：left,top,all,none
            params: {
                TEST_QJLX_CODE: row.TEST_QJLX_CODE,
            } // 默认参数，可以配合hideSearch使用
        };
        return  $chartView.value && admin?.emitMicroEvent('JE_PLUGIN_CHART_MODULE', 'chart-renderer', $chartView.value, chartOptions).then((chartRef) => {
            // 列表刷新时，刷新图表
            $grid.store.on('load', () => {
                const params = {};// 设置查询参数
                chartRef.value?.load(params);
            })
        });
    })

}
const $chartView = ref();
Modal.window({
    title: '打开图表带参',
    width:700,
    height:400,
    content: () => {
        return JE.h('div', { ref:$chartView }, chartContent())
    },
})