DataGear 使用靜態HTML模板快速製做動態可視化數據看板

DataGear看板提供了導入靜態HTML模板的功能，使您能夠利用現有的HTML模板資源快速製做動態可視化數據看板。javascript

首先，您須要準備一套已設置好佈局的靜態HTML模板，其中包含的HTML主頁及相關資源，例如：css

index.html
css/
  |---style.css
  |---images
       |---bg.png
       |---bg_head.png

它的靜態效果以下圖所示：html

而後，將這套靜態HTML模板壓縮到一個ZIP文件中（注意index.html及其資源要直接放在壓縮包的根目錄下），使用DataGear看板的[導入]功能，將這個ZIP文件到入爲看板。java

導入成功後，打開看板編輯界面，爲HTML模板中的div圖表元素添加dg-chart-widget屬性指定圖表組件，例如：git

<div class="panel-content" dg-chart-widget="[圖表組件ID]"></div>
<!--「[圖表組件ID]」能夠是任意圖表條目的ID值-->

設置完全部的圖表元素後，一個可視化數據看板就製做完成了，點擊[保存並展現]按鈕，便可查看展現效果。echarts

等等，默認的展現效果差強人意……，不要緊，自定義展現效果也很簡單！佈局

首先，自定義圖表主題。打開看板編輯界面，爲<body>標籤添加dg-chart-theme自定義圖表主題，以下代碼：spa

<body dg-chart-theme="{color:'#F0F0F0',backgroundColor:'transparent',actualBackgroundColor:'#050d3c'}" >

而後，自定義圖表設置項。爲<body>標籤添加dg-chart-options屬性，定義全局圖表設置項：code

<body ... dg-chart-options="{title:{show:false},legend:{top:0},grid:{top:25}}">
<!--隱藏標題、圖例頂部展現、座標系距頂部25像素，具體參考echarts設置項-->

大功告成！htm