共计 834 个字符，预计需要花费 3 分钟才能阅读完成。
DataGear 看板提供了导入动态 HTML 模板的性能，使您能够利用已有的任意 HTML 网页资源疾速制作数据可视化看板。
首先，您须要筹备一套已设置好布局的动态 HTML 模板，其中蕴含的 HTML 网页及相干资源，例如：
index.html
css/
|---style.css
|---images
|---bg.png
|---bg_head.png
js/
|---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> 标签增加 dg-chart-options 属性，定义全局图表设置项：
<body ... dg-chart-options="{title:{show:false},legend:{top:0},grid:{top:25}}">
<!-- 暗藏题目、图例顶部展现、坐标系距顶部 25 像素，具体参考 echarts 设置项 -->功败垂成！
正文完
发表至： javascript
2022-06-15
