可视化编辑器之数据源配置

随着国家近来几次重要会议开展以及落地。企业转型及可视化布控迎来热潮。所以一款能效力于管理层——运筹帷幄、省力于运维层——降低维护成本的可视化编辑器是很有必要的。关键在于，它很轻便。

给大家展示一下最近一个竣工项目的效果图：

该项目实现了企业核心指标的实时观测，以及整体布控。另外其还易于上手。并且是由编辑器与3D（数字孪生理念）联合完成。那么话不多说，言归正传。我将站在开发者角度，以项目为原型。通过系列文章，带领大家了解这款编辑器。**

本篇主旨:  数据源配置

编辑器针对不同主题设计了三个数据源配置
1、特定业务数据
2、表格数据
3、图表数据
对于数据源的配置。只需开发者了解基本的Ajax请求以及数据解析即可。

特定业务数据

我们根据设计图绘制好基本区域后，绑定数据对象。再通过数组选匹配对应关系即可完成数据驱动。
如下图——绘图

绑定数据对象

数据源配置

最终效果图

如上图中的数据源配置可见，有如下配置：
接口描述，接口地址，刷新时间，数据解析，关联字段
大大的增强了前端配置的灵活性。
核心代码如下:

  start() {
    // 获取接口配置
    const dataPlans = this._network.getDataPlans()
    const timer = this._timer
    dataPlans.forEach(async (dataPlan, index) => {
      if (dataPlan.type !== "http") {
        return
      }
      // 获取数据
      await this.invokeData(dataPlan)
      // 数据刷新
      timer[index] = setInterval(async () => {
        await this.invokeData(dataPlan)
      }, dataPlan.refreshTime)
    })
  }

以上为数据获取刷新核心代码，此处不做过多描述，代码层面敬请期待后续原理系列文章。

表格数据

在属性面板中配置（配置详情在属性面版中，原理同数据源配置）
此处强调三点
1、表头配置
2、CSS样式配置
3、联动功能

表头配置

   标题配置对应数据的属性、标题栏等

CSS样式配置

  使用原生写法，确保有效性。

联动功能通过定义事件派发或事件监听完成
由于截图场景下，此表格无联动功能，此处暂不予以效果暂时。后期源码部分会展示联动效果。

最终效果图

图表数据

在属性面板中配置（配置详情在属性面版中，原理同数据源配置）
此处重点是，属性面板提供了常用图表配置。

JSON面板配置

更强大的是完美对接echats的options配置。实现真正的无缝对接。
如果已有现成的图表配置，直接移植到项目中即可。

最终效果图

如你所见，参考项目截图，通过上面的了解。在资源完备的情况下。开发者的任务可快速完成。如你所见，学习曲线非常平滑。本篇文章分享到此结束, 如果有兴趣，请关注后续分享文章。
强烈声明: 本文旨在分享成熟，轻便的可视化编辑器。

如果对可视化感兴趣，可以和我交流，微信541002349. 另外关注公众号“ITMan彪叔” 可以及时收到更多有价值的文章。