可視化編輯器之數據源配置

隨着國家近來幾回重要會議開展以及落地。企業轉型及可視化布控迎來熱潮。因此一款能效力於管理層——指揮若定、省力於運維層——下降維護成本的可視化編輯器是頗有必要的。關鍵在於，它很輕便。

給你們展現一下最近一個竣工項目的效果圖：

該項目實現了企業核心指標的實時觀測，以及總體布控。另外其還易於上手。而且是由編輯器與3D（數字孿生理念）聯合完成。那麼話很少說，言歸正傳。我將站在開發者角度，以項目爲原型。經過系列文章，帶領你們瞭解這款編輯器。**

本篇主旨:  數據源配置

編輯器針對不一樣主題設計了三個數據源配置 一、特定業務數據 二、表格數據 三、圖表數據 對於數據源的配置。只需開發者瞭解基本的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)
    })
  }

以上爲數據獲取刷新核心代碼，此處不作過多描述，代碼層面敬請期待後續原理系列文章。

表格數據

在屬性面板中配置（配置詳情在屬性面版中，原理同數據源配置） 此處強調三點 一、表頭配置 二、CSS樣式配置 三、聯動功能

表頭配置

標題配置對應數據的屬性、標題欄等

CSS樣式配置

使用原生寫法，確保有效性。

聯動功能經過定義事件派發或事件監聽完成 因爲截圖場景下，此表格無聯動功能，此處暫不予以效果暫時。後期源碼部分會展現聯動效果。

最終效果圖

圖表數據

在屬性面板中配置（配置詳情在屬性面版中，原理同數據源配置） 此處重點是，屬性面板提供了經常使用圖表配置。

JSON面板配置

更強大的是完美對接echats的options配置。實現真正的無縫對接。 若是已有現成的圖表配置，直接移植到項目中便可。

最終效果圖

如你所見，參考項目截圖，經過上面的瞭解。在資源完備的狀況下。開發者的任務可快速完成。如你所見，學習曲線很是平滑。本篇文章分享到此結束, 若是有興趣，請關注後續分享文章。 強烈聲明: 本文旨在分享成熟，輕便的可視化編輯器。

若是對可視化感興趣，能夠和我交流，微信541002349. 另外關注公衆號「ITMan彪叔」 能夠及時收到更多有價值的文章。