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. Beyond Compare 的比较以及导出的简单设置方法

    最近需要对文件进行对比 但是发现对比的工作量比较难搞. 用到了beyond compare 的工具 感觉挺好用的 但是需要注意事项比较多这里记录一下 1.  session setting 里面进行设 ...

  2. vscode推荐插件

    js相关的插件 JavaScript (ES6) code snippets Babel ES6/ES7 html css 汉化 Chinese (Simplified) (简体中文) Languag ...

  3. 关于Curl命令的使用

    最常用的curl命令 1.发送GET请求 curl URL 例: curl URL?a=1&b=nihao 2.发送POST请求 curl -X POST -d 'a=1&b=niha ...

  4. TienChin 渠道管理-删除渠道

    更改一下菜单权限,将删除渠道的 delete 改为 remove: ChannelController.java @PreAuthorize("hasPermission('tienchin ...

  5. GaussDB(for MySQL)剪枝功能，让查询性能提升70倍！

    作者,祝青平,华为云数据库内核高级工程师.擅长数据库优化器内核研发,9年数据库内核研发经验,参与多个TP以及AP数据库的研发工作. 近日,华为云数据库社区下面有这样一条用户提问留言:请问,如何通过My ...

  6. (python)做题记录||2024.2.4||题目是codewars的【 All Balanced Parentheses】

    题目链接:https://www.codewars.com/kata/5426d7a2c2c7784365000783/python 我的解决方案: def balanced_parens(n): # ...

  7. 【CAS学习一】CAS服务端部署

    公司要做单点登录系统,网上搜了一下目前主流方案是CAS,故部署一个试试看. 1.下载 因为最近出现log4j2远程代码执行漏洞,尽量选择新版本已修复此漏洞的,故CAS选择6.4版本.打包部署依赖JDK ...

  8. 顺着这份Java面试地图，国内一二线互联网公司随便进...

    原创:陶朱公Boy(微信公众号ID:taozhugongboy),欢迎分享,转载请保留出处. 前言 临近春节,这几天手头没什么事情,花了点时间,将自己近两年收集的面试真题,进行了一番深度归纳总结,整理 ...

  9. Power BI 11 DAY

    目录 电商平台流量分析 流量相关指标 流量数量指标 流量质量指标 度量值计算公式 流量转化率重要指标 指标观测维度 电商平台流量分析 电商平台黄金公式:销售额 = 流量 + 转化率 + 客单价 流量相 ...

  10. Js中Reflect对象

    Js中Reflect对象 Reflect是ES6起JavaScript内置的对象,提供拦截JavaScript操作的方法,这些方法与Proxy对象的handlers中的方法基本相同. 描述 Refle ...