首先，您须要准备一套已设置好布局的静态HTML模板，个中包含的HTML网页及干系资源，例如：
index.htmlcss/ |---style.css |---images |---bg.png |---bg_head.pngjs/ |---index.js |---common.js
它的静态效果如下图所示：
然后，将这套静态HTML模板压缩到一个ZIP文件中，利用DataGear看板的[导入]功能，将这个ZIP文件导入为看板。
导入成功后，打开看板编辑界面，为HTML模板中的div元素添加dg-chart-widget属性绑定图表组件，例如：
...<div class="panel-content" dg-chart-widget="图表组件ID"></div>...
个中，图表组件ID 是图表管理列表中的一个图表条款ID。
设置完所有的div元素后，一个数据可视化看板就制作完成了，点击[保存并展示]按钮，即可查看展示效果。
等等，默认的展示效果差强人意……，没紧要，自定义展示效果也很大略！
首先，自定义图表主题，打开看板编辑界面，为<body>标签添加dg-chart-theme自定义图表主题，如下代码：
...<body dg-chart-theme="{color:'#F0F0F0', backgroundColor:'transparent', actualBackgroundColor:'#050d3c'}">...</body>...
然后，自定义图表设置项，为<body>标签添加dg-chart-options属性，定义全局图表设置项：
<body ... dg-chart-options="{title:{show:false}, legend:{top:0},grid:{top:25}}"><!--隐蔽标题、图例顶部展示、坐标系距顶部25像素，详细参考echarts设置项-->
大功告成！
官网地址：http://www.datagear.tech
源码地址：
https://gitee.com/datagear/datagear
https://github.com/datageartech/datagear
