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

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

介绍

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

详情

1.参考图表引擎的案例配置图表，并且在图表引擎中图表可以正正常显示；

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

3.打开图表的效果

相关代码

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: 'ZZTTB',// 图表编码
            style: 'height:200px;',// 高度
            hideSearch: 'left',// 隐藏查询区域：left,top,all,none
            params: {
                code: 'ZZTTB',// 图表编码
            } // 默认参数，可以配合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:300,
    content: () => {
        return JE.h('div',  { ref:$chartView }, chartContent())
    },
});