可视化大屏开发系列——DataV的使用

2024-06-23 19:20

本文主要是介绍可视化大屏开发系列——DataV的使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

以下内容为近期个人学习总结,若有错误之处,欢迎指出!

可视化大屏开发系列——DataV的使用

  • 一、介绍
  • 二、注意事项
    • 1、技术支持
    • 2、兼容性
    • 3、状态更新
  • 三、实现效果
  • 四、使用(在vue2项目中)
    • 1.npm安装
    • 2.main.js中引入
    • 3.开启愉快地玩耍
      • (1)全屏容器
      • (2)边框
      • (3)装饰
      • (4)图表
      • (5)其它图表推荐
        • A.水位图
        • B.轮播表
        • C.胶囊柱图
        • D.排名轮播表
        • E.锥形柱图

一、介绍

DataV是一款用来做大屏数据展示的组件库,开源免费,配置简单,视觉效果还是很不错的,提供精美的边框和装饰、常见图表(如:仪表盘、折线图、柱状图、饼状图、雷达图)、及其它数据展示样式(如:水位图、轮播表、飞线图等),非常推荐使用。
官网地址:http://datav.jiaminghi.com/

二、注意事项

1、技术支持

DataV提供的功能的实现,官网支持Vue2和ReactVue3还只能使用边框和装饰

2、兼容性

组件库的开发和调试都使用Chrome浏览器,所以要使用Chrome浏览器哦;

3、状态更新

(后面代码里会详述这种情况)
组件更新数据后,状态可能出现不刷新情况,原因及解决办法:
组件props未设置deep监听,刷新props时,请直接生成新的props对象(基础数据类型除外),或完成赋值操作后使用ES6拓展运算符生成新的props对象(this.someProps = { …this.someProps })。

三、实现效果

官方Demo效果如下,用户体验很棒,科技感炫酷十足。
源码链接在官网地址http://datav.jiaminghi.com/demo/,大家可自行查找下载学习。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

四、使用(在vue2项目中)

1.npm安装

npm install @jiaminghi/data-view

2.main.js中引入

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

3.开启愉快地玩耍

推荐掌握以下内容:

(1)全屏容器

dv-full-screen-container
全屏容器将根据屏幕比例及当前浏览器窗口大小,自动进行缩放处理。浏览器全屏(按F11)后,全屏容器将充满屏幕。
注意:要在全屏容器内使用百分比+flex布局,这样在不同的分辨率下页面显示效果才能较为一致。

<template><dv-full-screen-container class="all"><div class="head"><!-- 这里面使用flex布局 --></div><div class="whole"><!-- 这里面使用flex布局 --></div></dv-full-screen-container>
</template>
.all {.head {height: 8%;display: flex;}.whole {height: 92%;display: flex;gap:10px;}
}

(2)边框

边框均由SVG元素绘制,体积轻量不失真。边框的颜色支持自定义。推荐一些简约风格(个人喜欢)的精美边框如下:
dv-border-Box-1

<dv-border-box-1>dv-border-box-1</dv-border-box-1>

在这里插入图片描述

dv-border-Box-2
在这里插入图片描述

dv-border-Box-5
在这里插入图片描述

dv-border-Box-6
在这里插入图片描述

dv-border-Box-7
在这里插入图片描述

dv-border-Box-12
在这里插入图片描述

dv-border-Box-13
在这里插入图片描述
边框的具体使用参考学习链接:http://datav.jiaminghi.com/guide/borderBox.html

(3)装饰

装饰也是用SVG元素绘制,用来点缀页面,可增强视觉效果。装饰的颜色支持自定义。推荐两个个人喜欢的精美装饰如下:
dv-decoration-7
在这里插入图片描述

dv-decoration-11
在这里插入图片描述
装饰的具体使用参考学习链接:http://datav.jiaminghi.com/guide/decoration.html

(4)图表

图表组件基于Charts(http://charts.jiaminghi.com/)封装,只需将对应图表option数据传入组件即可。支持各种仪表盘、折线图、柱状图、饼状图、雷达图等。
优点:
A.与echarts相比,配置项确实简单很多很多,实现的视觉效果很强;
B.当窗口发生resize时,图表组件会重新计算宽高以便于自适应
缺点:
适合仅需展示不需交互的场景(我的理解是:如果数据变化,图表将无法重新绘制),所以要谨慎选择,防止无法满足业务需求(如实时刷新数据)
图表的具体使用参考学习链接:http://datav.jiaminghi.com/guide/charts.html

(5)其它图表推荐

A.水位图

在这里插入图片描述
使用:

<dv-water-level-pond :config="waterConfig" style="width:150px;height:200px" />
export default {data(){return {waterConfig:{data: [55],shape: 'round'}}},mounted () {//模拟调用接口,10s后数据发生变化setTimeout(() => {//方式一:直接生成新的config对象// this.waterConfig = {//   data: [85],//   shape: 'round'// }//方式二:完成赋值操作后使用ES6拓展运算符生成新的config对象this.waterConfig.data = [85]this.waterConfig = { ...this.waterConfig }}, 10000)}
}

PS:上述模拟接口调用的代码要好好体会哦,在调用接口的真实项目中可解决数据变化了但页面状态并未发生变化的情况!

水位图的具体使用参考学习链接:http://datav.jiaminghi.com/guide/waterLevelPond.html

B.轮播表

轮播表可实现滚动列表轮播效果(可单条轮播也可以整页轮播),支持定制个性化元素。单元格(除表头外)支持click事件和mouseover事件。
在这里插入图片描述
轮播表的具体使用参考学习链接:http://datav.jiaminghi.com/guide/scrollBoard.html

C.胶囊柱图

在这里插入图片描述
胶囊柱图的具体使用参考学习链接:http://datav.jiaminghi.com/guide/capsuleChart.html

D.排名轮播表

在这里插入图片描述
排名轮播表的具体使用参考学习链接:http://datav.jiaminghi.com/guide/scrollRankingBoard.html

E.锥形柱图

在这里插入图片描述
锥形柱图的具体使用参考学习链接:http://datav.jiaminghi.com/guide/conicalColumnChart.html

注意:排名轮播表和锥形柱图会根据一堆数据某个属性数值的大小自动排序(由高到低),适合排名类数据展示。

好了,DataV的使用到此为止啦!

这篇关于可视化大屏开发系列——DataV的使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1088046

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof