文章目录

一、介绍
二、推荐的组件
- 1.边框
- 2.装饰
- 3.数字翻牌器
- 4.轮播滚动
- 5.Charts封装
总结

一、介绍

官方文档
GitHub源码库
支持Vue+React

二、推荐的组件

1.边框

代码如下（示例）：

<dv-border-box-1 :color="['red', 'green']" backgroundColor="blue" >dv-border-box-1</dv-border-box-1>

<dv-border-box-11 title="dv-border-box-11">dv-border-box-11</dv-border-box-11>

这个对于划分看板区域有很大的帮助，且效果很好，可以让看板更加出彩。这两个是动态和动静态效果的边框，官网还有许多静态动态的例子，可根据自己的需要自行选择。

2.装饰

代码如下（示例）：

<dv-decoration-11 style="width:200px;height:60px;">dv-decoration-11</dv-decoration-11>

 这个是文字装饰，可以让看板标题看起来不那么枯燥单调。

<dv-decoration-12 style="width:150px;height:150px;" />

  这是一个动态的装饰，虽然没啥作用，但是视觉效果拉满。

3.数字翻牌器

代码如下（示例）：

<dv-digital-flop :config="config" style="width:200px;height:50px;" />
const config1 = {number: [10, 100],content: '{nt}个{nt}元'
}const config2 = {number: [100, 1000],content: '{nt}个{nt}元'
}export default [config1,config2
]

<dv-digital-flop :config="config" style="width:200px;height:50px;" />
function formatter (number) {const numbers = number.toString().split('').reverse()const segs = []while (numbers.length) segs.push(numbers.splice(0, 3).join(''))return segs.join(',').split('').reverse().join('')
}const config1 = {number: [123456],content: '{nt}个',formatter
}const config2 = {number: [654321],content: '{nt}个',formatter
}export default [config1,config2
]

这相当于给数字切换加了个过渡效果，这样让有关数字的切换不那么生硬，细节到位，官网里还提供了保留小数位以及自定义显示模板的属性。

4.轮播滚动

代码如下（示例）：

<dv-scroll-board :config="config" style="width:500px;height:220px" />![请添加图片描述](https://img-blog.csdnimg.cn/c5476d4ab96040e7bae48e2156bc8be0.gif)export default {header: ['列1', '列2', '列3'],data: [['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3'],['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>'],['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3'],['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3'],['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3'],['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>'],['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3'],['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3'],['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3']],index: true,columnWidth: [50],align: ['center']
}

支持自定义到每一格子，非常实用了，足以应对大部分场景。

5.Charts封装

如下为图片示例可前往官网查询：

Charts官网

跟Echarts差不多，开源轻量，如果做的看板比较简单，可直接替换Echarts，这个组件直接搞定，以减少打包体积。

仪表盘

圆环图

胶囊柱状图

水位图

进度池

锥形柱图

总结

以上的组件对于修饰我们看板起到了很大的作用，建议尝试。

除此之外，一些修饰组件也可以用于普通功能，起到美化作用。

好用的前端组件-大数据看板相关推荐

前端转行大数据？没必要
文/北妈阅读本文需要 4.5分钟一最近又有读者,问我要不要转去学大数据,好像前端和大数据一点不沾边.... 说实话我是无语的文长,需耐心看完,读时有耐心,看完有信心. 这几年大数据和机器学习一直 ...
开源前端可视化大数据交互前端动态模板
介绍: 如今老板都很在乎公司实力形象往往会在大厅投放展示大数据巨屏你是否也想实现这样大数据效果展示本次带来一套开源的前端可视化大数据交互动态模板网页前端模板,是HTML网页模板只要稍微懂点前端 ...
软件开发全套视频教程汇总（javaSE，javaEE，linux,android开发，C# ,web前端，大数据云计算，数据挖掘,web前端，php开发，UI设计，C++开发，3D视频）
软件开发全套视频教程汇总(javaSE,javaEE,linux,android开发,C# ,web前端,大数据云计算,数据挖掘,web前端,php开发,UI设计,C++开发,3D视频) 这是我以前学 ...
D3.js、echar.js 前端必备大数据技能
大数据可视化「前言」 web前端一直都是个讲究门面和艺术美感的行业,如果你以为逻辑很强就够了,那就错了,你只适合做后端,真正的好前端是对美感和可视化的东西有一种接近痴狂的爱好,这种契机可以驱使你 ...
C#.NET 通用权限管理系统组件大数据多表分页获取部分列的参考方法
往往我们开发各种信息系统的时候,不只是简单的从一个表读取数据,很可能是从多个表读取数据后,把结果展示在界面上,当遇到2个大表关联时,若技术上没进行一些处理,那分页显示时速度会非常糟糕,在通用权限管理系 ...
尚硅谷全套课件整理：Java、前端、大数据、安卓、面试题
目录 Java 尚硅谷 IT 精英计划 JavaSE 内部学习笔记.pdf 尚硅谷 Java 基础实战之银行项目.pdf 尚硅谷 Java 技术之 JDBC.pdf 尚硅谷 Java 技术之 Java ...
我，大专毕业2年，从前端转型大数据开发，薪资涨了10K！
点击上方 "大数据肌肉猿"关注, 星标一起成长点击下方链接,进入高质量学习交流群今日更新| 950个转型案例分享-大数据交流群今天分享学习群一位同学的转型经历,他19年大专毕 ...
通过一个场景实例了解前端处理大数据的无限可能
随着前端的飞速发展,在浏览器端完成复杂的计算,支配并处理大量数据已经屡见不鲜.那么,如何在最小化内存消耗的前提下,高效优雅地完成复杂场景的处理,越来越考验开发者功力,也直接决定了程序的性能. 本文展现 ...
C#.NET 权限管理系统组件 - 大数据读写分离实现的例子
当web服务器的每天的访问量超过10万ip时对服务器主机的性能要求就非常高了,而且这些访问量又不是平均分布在24个小时里,往往有一个集中的访问高峰,晚上服务器的访问量又很低甚至是深夜连续好几个小时没访 ...

好用的前端组件-大数据看板

文章目录

一、介绍

二、推荐的组件

1.边框

2.装饰

3.数字翻牌器

4.轮播滚动

5.Charts封装

总结

好用的前端组件-大数据看板相关推荐

最新文章

热门文章