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. 分页sql大全

    一.排除Top分页法(自命名,非规范) 思想:所谓"排除Top分页",主要依靠"排除"和Top这个两大核心步骤.首先查询当前页码之前的数据,然后将该数据从总数据 ...

  2. 第三届人工智能，大数据与算法国际学术会议 (CAIBDA 2023)

    第三届人工智能,大数据与算法国际学术会议 (CAIBDA 2023) ​ 大会官网:http://www.caibda.org/ 大会时间:2023年6月16-18日 大会地点:中国郑州 截稿日期:2 ...

  3. 【Java】引用传递？值传递？

    引用传递和值传递,从上学那会儿就开始强调的概念,不管你是计算机相关专业还是自学Java,一定听过这么一句话: 方法调用参数如果是对象,那就是引用传递,如果是基本数据类型,就是值传递. 比如:funct ...

  4. CentOS7设置防火墙

    ①查看防火状态 systemctl status firewalld service iptables status ②暂时关闭防火墙 systemctl stop firewalld service ...

  5. 手撕Udp套接字｜实现群聊通信｜实现Windows & Linux通信交互

    ​ 专栏和Git地址 操作系统https://blog.csdn.net/yu_cblog/category_12165502.html?spm=1001.2014.3001.5482UdpSocke ...

  6. PHP中文件锁

    PHP中文件锁 文件锁的用途: 若一个人在写入一个文件,另外一个人同时也打个了这个文件进行写入文件. 这情况下,如果遇到一定的碰撞概率的话,不知道到底谁的操作为准. 因此,这个时候我们引入锁机制. 若 ...

  7. CH32V208蓝牙从机sleep模式下功耗测试

    本测试基于CH32V208W的开发板:蓝牙从机模式:使用程序BLE_UART 在进行功耗测试的时候尽量去除额外耗电器件,将开发板上的VDD于VIO相连接,测功耗时直接给VDD供电. 将会对500ms, ...

  8. 零基础入门学习Java之注解与反射

    Java反射 Java的程序为什么能在JVM虚拟机中跑起来?接下来将深入探讨下Java虚拟机类加载的机制 1.类的加载 整个Java内存可以分为三大板块 堆 存放new的数组.对象等 栈 存基本变量类 ...

  9. KVM环境：Active console session exists for this domain

    做测试过程中被迫换电脑,但没有关掉原电脑的连接,所以用其他电脑连接测试环境时,发现之前的kvm测试环境因没有断开,无法连接: error: operation failed: Active conso ...

  10. 基于python+mysql的宠物领养网站系统

    功能介绍 平台采用B/S结构,后端采用主流的Python语言进行开发,前端采用主流的Vue.js进行开发. 整个平台包括前台和后台两个部分. 前台功能包括:首页.宠物详情页.用户中心模块. 后台功能包 ...