DataGear如何使用靜態(tài)HTML模板快速制作數(shù)據(jù)可視化看板

發(fā)布時(shí)間：2021-10-12 16:02:39 來源：億速云閱讀：272 作者：柒染欄目：大數(shù)據(jù)

這篇文章將為大家詳細(xì)講解有關(guān)DataGear如何使用靜態(tài)HTML模板快速制作數(shù)據(jù)可視化看板，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

DataGear看板提供了導(dǎo)入靜態(tài)HTML模板的功能，使您可以利用已有的任意HTML網(wǎng)頁資源快速制作數(shù)據(jù)可視化看板。

首先，您需要準(zhǔn)備一套已設(shè)置好布局的靜態(tài)HTML模板，其中包含的HTML網(wǎng)頁及相關(guān)資源，例如：

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

它的靜態(tài)效果如下圖所示：

DataGear如何使用靜態(tài)HTML模板快速制作數(shù)據(jù)可視化看板

然后，將這套靜態(tài)HTML模板壓縮到一個(gè)ZIP文件中（注意index.html及其資源要直接放在壓縮包的根目錄下，不要再多嵌套一級目錄），使用DataGear看板的[導(dǎo)入]功能，將這個(gè)ZIP文件到入為看板。

導(dǎo)入成功后，打開看板編輯界面，為HTML模板中的div元素添加dg-chart-widget屬性綁定圖表組件，例如：

...
<div class="panel-content" dg-chart-widget="圖表組件ID"></div>
...

其中，圖表組件ID 是圖表管理列表中的一個(gè)圖表?xiàng)l目ID。

設(shè)置完所有的div元素后，一個(gè)數(shù)據(jù)可視化看板就制作完成了，點(diǎn)擊[保存并展示]按鈕，即可查看展示效果。

等等，默認(rèn)的展示效果差強(qiáng)人意……，沒關(guān)系，自定義展示效果也很簡單！

首先，自定義圖表主題，打開看板編輯界面，為<body>標(biāo)簽添加dg-chart-theme自定義圖表主題，如下代碼：

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

然后，自定義圖表設(shè)置項(xiàng)，為<body>標(biāo)簽添加dg-chart-options屬性，定義全局圖表設(shè)置項(xiàng)：

<body ... dg-chart-options="{title:{show:false},legend:{top:0},grid:{top:25}}">
<!--隱藏標(biāo)題、圖例頂部展示、坐標(biāo)系距頂部25像素，具體參考echarts設(shè)置項(xiàng)-->

大功告成！

DataGear如何使用靜態(tài)HTML模板快速制作數(shù)據(jù)可視化看板

關(guān)于DataGear如何使用靜態(tài)HTML模板快速制作數(shù)據(jù)可視化看板就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

猜你喜歡