低代码看板中动态加载图表模块和接口数据

低代码看板最核心的能力不是“拖几个图表”，而是把布局、图表类型、图表配置、接口数据源拆开，让页面可以通过配置动态渲染。

一个基础结构可以拆成三层：

• grid：负责布局。

• option：负责图表默认配置。

• api：负责接口数据源。

配置驱动画布

预览页面只关心当前模板里有哪些格子，然后根据每个格子的配置渲染组件。

<template>
  <div class="grid h-full grid-flow-col grid-rows-6 gap-2">
    <div v-for="(item, i) in gridList.list[gridList.tCurrent].grid" :class="item.class">
      <component :is="item.borderType" :colorType="item.colorType">
        <div class="absolute w-full h-full p-2">
          <div class="w-full h-full p-3">
            <div :id="'id' + i" class="w-full h-full"></div>
          </div>
        </div>
      </component>
    </div>
  </div>
</template>

这里有两个动态点：

• item.class 控制布局位置。

• item.borderType 控制外框组件。

这样后面换模板、换边框、换图表，不需要改预览页面。

动态 import 图表模块

每种图表可以单独放一个模块，例如：

components/grid/js/bar-1.js
components/grid/js/line-1.js
components/grid/js/pie-1.js
components/grid/js/gauge-1.js

渲染时根据配置动态导入：

const getData = () => {
  gridList.list[gridList.tCurrent].grid.forEach(async (item, i) => {
    if (!gridList.options?.[i]?.module) return;

    const dom = document.getElementById("id" + i);
    if (!dom) return;

    const chart = echarts.init(dom, "dark");
    const moduleName = gridList.options[i].module;
    const chartModule = await import(`../../components/grid/js/${moduleName}.js`);

    if (gridList.api[i]) {
      autoRequest(gridList.api[i], {}, "get").then((res) => {
        const option = chartModule.setData(gridList.options[i].option, res);
        chart.setOption(option);
        gridList.options[i].option = option;
      });
    } else {
      chart.setOption(gridList.options[i].option);
    }

    window.addEventListener("resize", () => {
      chart.resize();
    });
  });
};

这里的关键是：图表模块不只导出默认配置，还可以导出 setData 方法，把接口数据转换成 ECharts option。

数据源编辑器

看板编辑器里可以给每个图表配置接口地址，同时展示当前图表的数据结构示例。

<template>
  <div class="flex flex-row">
    <div class="flex-1 px-3 py-4">
      <div id="editor" style="height: 400px"></div>
    </div>

    <div class="flex-1 p-3">
      <a-input-search
        v-model:value="apiUrl"
        prefix="GET："
        enter-button="运行"
        @search="requestFn"
      />
      <div id="editor-api" class="mt-5" style="height: 300px"></div>
    </div>
  </div>
</template>

Monaco 初始化：

const initEdit = (id) => {
  return monaco.editor.create(document.getElementById(id), {
    value: "",
    language: "json",
    readOnly: false,
    lineNumbers: false,
    wordWrap: true,
    fontSize: 14,
    lineHeight: 15,
    minimap: { enabled: false },
    automaticLayout: true,
    contextmenu: false,
    theme: "vs-dark",
  });
};

加载图表示例数据：

const getExampleData = async () => {
  const moduleName = gridList.options[props.openIndex].module;
  const { data } = await import(`../components/grid/js/${moduleName}.js`);

  editor1.setValue("// 数据格式示例\n" + JSON.stringify(data));
  editor1.trigger("", "editor.action.formatDocument");
};

运行接口：

const requestFn = () => {
  if (!apiUrl.value) return;

  autoRequest(apiUrl.value, {}, "get").then((res) => {
    editor2.setValue(JSON.stringify(res));
    editor2.trigger("", "editor.action.formatDocument");
  });
};

状态管理

配置可以先放在 Pinia：

export const kanban = defineStore("kanban", {
  state: () => {
    return {
      gridList: gridData,
    };
  },
});

后续如果要保存到后端，只需要把 gridList 序列化即可。

总结

低代码看板不要一开始就做得很复杂。最小可用模型其实是：

布局模板 + 图表模块 + 图表配置 + 接口地址 + 预览渲染

只要这几块拆清楚，后面再加拖拽、缩放、复制、权限、版本管理，都会比较顺。

这类系统最容易乱的是“把图表逻辑写死在页面里”。一旦改成动态模块和配置驱动，维护成本会低很多。