15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > DataGear 使用静态HTML模板制作数据可视化看板

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

时间:2023-07-24 10:36:01 | 来源:网站运营

时间:2023-07-24 10:36:01 来源:网站运营

DataGear 使用静态HTML模板制作数据可视化看板: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设置项-->大功告成!



关键词:静态,使用,模板,作数

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭