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> 标签添加 dg-chart-options 属性，定义全局图表设置项：

<body ... dg-chart-options="{title:{show:false},legend:{top:0},grid:{top:25}}">

<!--隐藏标题、图例顶部展示、坐标系距顶部25像素，具体参考echarts设置项-->

大功告成！

DataGear 使用静态HTML模板制作数据可视化看板的更多相关文章

  1. 数据可视化地图制作教程，这个免费BI软件轻松搞定

    ​数据可视化地图制作教程 现在做数据分析基本上离不开数据可视化,在大量的数据中,有很大一部分数据都与地理信息相关,因此,在数据可视化中,可视化地图是非常重要的一部分.无论是新闻报道,还是商业分析报告, ...

  2. 第六篇：R语言数据可视化之数据分布图（直方图、密度曲线、箱线图、等高线、2D密度图）

    数据分布图简介 中医上讲看病四诊法为:望闻问切.而数据分析师分析数据的过程也有点相似,我们需要望:看看数据长什么样:闻:仔细分析数据是否合理:问:针对前两步工作搜集到的问题与业务方交流:切:结合业务方 ...

  3. Excel数据可视化图表设计需要注意的几个问题

    ​大数据发展迅速的时代,数据分析驱动商业决策.对于庞大.无序.复杂的数据要是没经过合适的处理,价值就无法体现. 可以想象一本没有图片的教科书.没有图表.图形或是带有箭头和标签的插图或流程图,那么这门学 ...

  4. BI工具数据可视化效果哪家强？我选这款！

    BI工具是商业智能(Business Intelligence)软件的英文缩写.目前,商业智能通常被理解为将企业中现有的数据转化为知识,帮助企业做出明智的业务经营决策的工具. 企业经常会为如何选择BI ...

  5. 类似阿里双十一的可视化看板是怎么做的？无人机三维GIS看板也来了！

    天猫双十一数据可视化看板 每年的双十一,天猫都会在整点时刻直播战绩,惊叹于可怕战绩的同时,也会被背后展示的数据大屏吸引,这样让人眼前一亮的可视化数据看板是怎么做出来的? 所谓可视化数据看板,就是挂在墙 ...

  6. 利用R语言制作出漂亮的交互数据可视化

    利用R语言制作出漂亮的交互数据可视化 利用R语言也可以制作出漂亮的交互数据可视化,下面和大家分享一些常用的交互可视化的R包. rCharts包 说起R语言的交互包,第一个想到的应该就是rCharts包 ...

  7. 数据可视化之 图表篇（二）如何用Power BI制作疫情地图？

    丁香园制作的这个地图可视化,相信大家每天都会看好几遍,这里不讨论具体数据,仅来探讨一下PowerBI地图技术. 这个地图很简洁,主要有三个特征: 1,使用着色地图,根据数据自动配色 2,只显示中国地图 ...

  8. Python 爬取 热词并进行分类数据分析-[云图制作+数据导入]

    日期:2020.01.28 博客期:136 星期二 [本博客的代码如若要使用,请在下方评论区留言,之后再用(就是跟我说一声)] 所有相关跳转: a.[简单准备] b.[云图制作+数据导入](本期博客) ...

  9. 【Ecmall】ECMall2.x模板制作入门系列（认识ECMall模板）

    ECMall2.x模板制作入门系列之1(认识ECMall模板) 从ECMall2.0全新架构发布以来,随着版本的不断更新,ECMall已经逐渐走向一个稳定时期,是时候整理一些实用教程了.下面给大家带来 ...

  10. D3js初探及数据可视化案例设计实战

    摘要:本文以本人目前所做项目为基础,从设计的角度探讨数据可视化的设计的方法.过程和结果,起抛砖引玉之效.在技术方案上,我们采用通用web架构和d3js作为主要技术手段:考虑到项目需求,这里所做的可视化 ...

随机推荐

  1. Mysql数据库部分管理命令极简学习总结

    背景 今天遇到一个得很奇怪的问题. Mysql一个运行时间很长的select阻塞了对select里面左连接表做create index 操作的SQL 当时感觉不应该, 一直以为读锁不会与独占更新锁互斥 ...

  2. Lectures

    Copy and Paste 3(P9523) Problem Solution 转移方程中的"父问题枚举子问题寻找转移"可以转成"子问题寻找父问题主动转移"处 ...

  3. uni-app三目运算 uni-app监听属性

    三目运算 <text>{{mag>10 ? '优秀' : ""}}</text> 三目运算的高级用法 大于1000用kg表示 小于1000,用g表示 ...

  4. css 宽度分离原则

    我们想设计一个w=180px:h=100px的div; .demo1 { width: 180px; height: 100px; background: pink; padding: 10px; b ...

  5. 用户 'NT Service\SSISScaleOutMaster140' 登录失败

    用户 'NT Service\SSISScaleOutMaster140' 登录失败. 原因: 找不到与提供的名称匹配的登录名. 项目情况: 用户 'NT Service\SSISScaleOutMa ...

  6. layui之静态表格的分页及搜索功能以及前端使用XLSX导出Excel功能

    LayUI官方文档:https://layui.dev/docs/2/#introduce XLSX NPM地址:https://www.npmjs.com/package/xlsx XLSX 使用参 ...

  7. 5.1 内存CRC32完整性检测

    CRC校验技术是用于检测数据传输或存储过程中是否出现了错误的一种方法,校验算法可以通过计算应用与数据的循环冗余校验(CRC)检验值来检测任何数据损坏.通过运用本校验技术我们可以实现对特定内存区域以及磁 ...

  8. 爆了！Sealos 三天支持 1000 个帕鲁私服

    Sealos 的帕鲁私服模板从第一天发布之后就起了 100 多个私服,第二天直接上到 500 多个,第三天直接上千,还在加速增长中.来讲讲我们只用一个晚上怎么做到上线一个专属可用区的,还有一些帕鲁实践 ...

  9. ASP.NET Core分布式项目实战（详解oauth2授权码流程）--学习笔记

    最近公司产品上线,通宵加班了一个月,一直没有更新,今天开始恢复,每日一更,冲冲冲 任务13:详解oauth2授权码流程 我们即将开发的产品有一个用户 API,一个项目服务 API,每个服务都需要认证授 ...

  10. NC25045 [USACO 2007 Jan S]Balanced Lineup

    题目链接 题目 题目描述 For the daily milking, Farmer John's N cows (1 ≤ N ≤ 100,000) always line up in the sam ...