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