DataGear 使用静态HTML模板快速制作数据可视化看板

原创
2020/02/21 12:07
阅读数 3.6W

DataGear看板提供了导入静态HTML模板的功能,使您可以利用已有的任意HTML网页资源快速制作数据可视化看板。

首先,您需要准备一套已设置好布局的静态HTML模板,其中包含的HTML网页及相关资源,例如:


index.html
css/
  |---style.css
  |---images
       |---bg.png
       |---bg_head.png
js/
  |---index.js
  |---common.js

它的静态效果如下图所示:

然后,将这套静态HTML模板压缩到一个ZIP文件中(注意index.html及其资源要直接放在压缩包的根目录下,不要再多嵌套一级目录),使用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设置项-->

大功告成!

官网地址:http://www.datagear.tech

源码地址:

Gitee:https://gitee.com/datagear/datagear

Github:https://github.com/datageartech/datagear

大屏模板地址:https://gitee.com/datagear/DataGearDashboardTemplate

 

展开阅读全文
打赏
1
4 收藏
分享
加载中
更多评论
打赏
0 评论
4 收藏
1
分享
返回顶部
顶部