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

最新推荐文章于 2025-04-12 14:09:01 发布

DataGear

最新推荐文章于 2025-04-12 14:09:01 发布

阅读量3.3k

点赞数 1

文章标签：数据可视化可视化

本文链接：https://blog.youkuaiyun.com/datagear/article/details/107635148

版权

本文介绍如何使用DataGear看板通过导入静态HTML模板快速创建数据可视化看板，包括压缩模板、添加图表组件及自定义展示效果的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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。

设置完所有的图表元素后，一个数据可视化看板就制作完成了，点击[保存并展示]按钮，即可查看展示效果。

等等，默认的展示效果差强人意……，没关系，自定义展示效果也很简单！

首先，自定义图表主题，打开看板编辑界面，为<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

源码地址：https://gitee.com/datagear/datagear

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