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

682 阅读3分钟

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

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

该项目实现了企业核心指标的实时观测,以及整体布控。另外其还易于上手。并且是由编辑器与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彪叔” 可以及时收到更多有价值的文章。