> For the complete documentation index, see [llms.txt](https://408550179s-organization.gitbook.io/blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://408550179s-organization.gitbook.io/blog/di-dai-ma-kan-ban-zhong-dong-tai-jia-zai-tu-biao-mo-kuai-he-jie-kou-shu-ju.md).

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

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

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

* `grid`：负责布局。
* `option`：负责图表默认配置。
* `api`：负责接口数据源。

## 配置驱动画布

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

```vue
<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
```

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

```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。

## 数据源编辑器

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

```vue
<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 初始化：

```js
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",
  });
};
```

加载图表示例数据：

```js
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");
};
```

运行接口：

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

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

## 状态管理

配置可以先放在 Pinia：

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

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

## 总结

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

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

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

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