DataGear 看板提供了导入动态 HTML 模板的性能,使您能够利用已有的任意 HTML 网页资源疾速制作数据可视化看板。
首先,您须要筹备一套已设置好布局的动态 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>
标签增加 dg-chart-options
属性,定义全局图表设置项:
<body ... dg-chart-options="{title:{show:false},legend:{top:0},grid:{top:25}}"><!--暗藏题目、图例顶部展现、坐标系距顶部25像素,具体参考echarts设置项-->
功败垂成!