不會這3個ChartBuilder使用技巧，怎麼開發優秀的數字孿生視覺化專案?

ChartBuilder圖表製作工具

用於專案資料視覺化

使用4步法可快速構建大屏

下面，

帶大家瞭解 ChartBuilder必學的3個使用技巧

1. 元件開發1.1

文字元件

例：選擇文字類別，拖拽一個文字元件顯示在頁面上。

1.修改文字元件值：

①　選中該文字元件

②　點選資料對接按鈕顯示資料對接皮膚

③　修改資料皮膚的json資料

④　點選驗證資料來源按鈕驗證修改的資料是否符合格式要求

⑤　點選儲存按鈕儲存其修改

1.2 列表元件

例：選擇表格類別，拖拽一個列表元件顯示在頁面上。

1. 雙擊元件顯示右側管理器修改列表元件樣式。

修改列表元件屬性配置

2. 修改列表表格頭：

①　雙擊該元件顯示右側屬性皮膚

②　點選Options配置按鈕

③　選擇titie屬性進行修改操作

④　點選儲存&執行按鈕儲存其修改

修改列表元件屬性配置

3. 修改列表元件的資料內容操作與文字元件相同，參考文字元件修改值操作說明。

1.3 Echarts元件

例：選擇圖表類別拖拽一個3D餅圖元件顯示在頁面上。

1.修改Echarts圖表裡的option裡屬性值操作

①　雙擊該元件顯示右側屬性皮膚

②　點選Options配置按鈕

③　修改Options配置的屬性值

④　點選儲存&執行按鈕儲存其修改

修改3D餅圖元件的配置

2. 修改Echarts元件的資料內容操作與文字元件相同，詳情參考文字元件修改值操作說明。

1.4 Echarts元件

例：選擇通用類別拖拽Echarts元件顯示在頁面上。

注意：

Echarts元件不會顯示任何內容，空白元件是需要通過編寫程式碼來顯示其內容的，空白元件可以新增文字程式碼，可以修改樣式，支援JavaScript語法，可以通過程式碼配置新的圖表。

1. Echarts元件新增新的Echarts圖表步驟:

①　雙擊該元件顯示右側屬性皮膚

②　點選JavaScript按鈕

③　在JavaScript配置皮膚裡編寫Echarts程式碼

④　點選儲存&執行按鈕儲存其修改

注意：

使用JavaScript配置皮膚編寫程式碼提供了幾個常用的方法：

this.getDom()  // 獲取該元件dom

2 圖層管理器

點選畫布底部的圖層管理器的按鈕開啟左側的圖層管理，在左側的圖層管理器中可以對元件進行編輯、刪除、打組、解組等一系列功能。在圖層管理器皮膚可以對單一元件進行位置調換，以及一系列的編輯操作。也可以對打組進行相對應的操作。

2.1 元件層級變化

在左側圖層管理器可以看到元件的層級顯示順序，排列順序越往前表示該元件 的層級越高，在渲染時層級也是最高的，可以選中元件右鍵出現右鍵選單來調整元件的層級順序，也可以在右鍵選單中對元件進行編輯元件別名、複製、刪除、鎖定、隱藏等操作。如圖所示：

2.2 元件打組操作

在左側圖層管理器中可以管理組的功能，對於元件右鍵選單的成組與解組功能必須是選中兩個或兩個以上的元件方可選擇該功能。可以在畫布中左鍵按下框選元件後對選中的元件右鍵彈出右鍵選單選擇成組，就可以將選中的元件進行打組了。其次也可在左側圖層皮膚裡使用快捷鍵 Ctrl+滑鼠左鍵新增元件進行成組，如圖所示：

2.3 元件的元件別名和組別名操作

要想在ThingJS編輯器中對元件單獨程式碼控制，或者對組進行操作就必須設定元件別名和組別名，單擊單個元件在右鍵選單中點選重新命名按鈕就可以設定元件別名，或者點選對接資料開啟資料皮膚，在資料皮膚的元件別名進行設定。選中組右鍵開啟右鍵選單點選重新命名按鈕即可對組別名進行編輯和修改，如圖所示：

3圖表在專案中引用

圖表在專案中的引用，建立一個空專案，專案中需要引入圖表需要的PreviewChartControl.js檔案，在函式中編寫載入圖表的程式碼，載入多套圖表需要在後續載入圖表程式碼裡新增reuse為true引數。如圖所示：

設定的元件別名在專案中通過編寫$(‘div[data-v-alias=chartBuilder設定的元件別名]’) 程式碼來獲取元件的html物件，設定的組別名通過編寫$(‘div[data-group-alias=chartBuilder設定的組別名]’)來獲取組的元素。