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>
...
然后,自定义图表设置项,为<body>标签添加dg-chart-options属性,定义全局图表设置项:
<body ... dg-chart-options="{title:{show:false},
legend:{top:0},grid:{top:25}}">
<!--隐藏标题、图例顶部展示、坐标系距顶部25像素,具体参考echarts设置项-->
大功告成!
本文内容来自网友供稿,文章观点仅代表作者本人,本站非盈利且无偿提供信息存储空间服务,不拥有所有权,如有文章有不实信息或侵犯了您的权益,请发送邮件至 cfseo1997@163.com 反馈核实,如需转载请注明出处:https://www.taobobolive.com/260352.html