基于vue制作简易的柱状图
一般很常见的柱状图,大家都想到用百度echart,如果整个项目就只绘制仅有的一个柱状图,引入echart就有点大材小用了,哈哈哈。
预览地址:https://zuobaiquan.github.io/vue/vueExercise/vue-test/dist/index.html#/bargraph
效果图
代码显示如下:
<template>
<div class="line-chart">
<ul>
<li v-for="(item,index) in dataListArr" :class="item.number>0?'':'position-top'">
<div class="box" :style="{height:item.percentNum*10+'rem'}">
<span class="num">{{item.number}}</span>
</div>
</li>
</ul>
</div>
</template>
export default {
name: 'test',
data(){
return {
dataListArr:[
{'number':10,'percentNum':0},
{'number':-80,'percentNum':0},
{'number':30,'percentNum':0},
{'number':-50,'percentNum':0}
]
}
},
created(){
let maxIndex=0,maxNegative=0,maxPositive=0;
this.dataListArr.forEach(function(v,i){
if (Math.abs(v.number)<=Math.abs(v.number)){
maxIndex=i;
}
if((v.number>0)&&(v.number>maxPositive)){
maxPositive=v.number;
}
if((v.number<0)&&(v.number<maxNegative)){
maxNegative=v.number;
}
});
this.$nextTick(function () {
document.querySelector('.line-chart').style.marginTop=-(maxPositive-maxNegative)/20+'rem';
})
let maxnumber=Math.abs(this.dataListArr[maxIndex].number);
setTimeout(function(){
this.dataListArr.forEach(function(value,index){
value.percentNum=Math.abs(value.number)/maxnumber;
});
console.log(this.dataListArr);
}.bind(this),0) }
}
$red: #f22323 !default;
$green: #00a000 !default;
$borderColor: #262626 !default;
body{
background: #0d0d0d;
}
.line-chart{
position:absolute;
top:50%;
left:;
right:;
height: 0.05rem;
background: $borderColor;
border-bottom: 1px solid $borderColor;
transform: translateY(-50%);
ul{
display: flex;
justify-content: space-between;
margin: 0 4rem;
li{
text-align: center;
list-style: none;
.box{
position: absolute;
bottom:;
width: 3.5rem;
height:;
background: $red;
text-align: center;
transform: translateX(-50%);
transition: height 1s;
.num{
position: absolute;
top:-1.4rem;
left:;
right:;
display: inline-block;
color: $red;
font-weight:;
font-size: 1.2rem;
line-height:;
}
}
&.position-top{
.box{
top:;
background: $green;
.num{
color: $green;
}
}
}
}
}
}
源码地址https://github.com/zuobaiquan/vue/tree/master/vueExercise/vue-test/src/views/bargraph
基于vue制作简易的柱状图的更多相关文章
- GearCase UI - 自己构建一套基于 Vue 的简易开源组件库
最近 1 ~ 2 月除了开发小程序之外,还一直在继续深入的学习 Vuejs.利用零碎.闲暇的时间整合了一套基于 Vue 的 UI 组件库.命名为 GearCase UI,意为齿轮盒.现在把该项目进行开 ...
- Vue 制作简易计算器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 基于vue全家桶制作的移动端音乐WebApp
Vue.js 2.0实战项目 基于Vue + Vuex + Vue-router + Webpack 2.0 打造移动端音乐WebAPP,实现了轮播图.音乐推荐.歌手列表.音乐搜索.注册等功能. 技术 ...
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
基于 Vue.js 之 iView UI 框架非工程化实践记要 像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...
- 一个基于vue的时钟
前两天写了一个基于vue的小钟表,给大家分享一下. 其中时针和分针使用的是图片,结合transform制作:表盘刻度是通过transform和transformOrigin配合画的:外面的弧形框框,啊 ...
- 基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计『转』
本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...
- 基于Vue开发的门户网站展示和后台数据管理系统
基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...
- 从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么
浏览文章前 这一期,我分享给大家三点看源码的小技巧,这也是从别的大佬那总结的. 被反复使用的代码 这样的代码是一个软件的重点函数,一个大神的写法有很多精华值得学习. 穿越时间的代码 如果一段代码10年 ...
- 【转】基于laravel制作APP接口(API)
这篇文章主要介绍了基于laravel制作APP接口(API)的相关资料,需要的朋友可以参考下 前期准备 前言,为什么做以及要做个啥本人姓小名白,不折不扣编程届小白一名,但是自从大一那会儿接触到编程这件 ...
随机推荐
- Python并发编程
进程 相关概念 进程 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期面向进程设计的计算机结构中,进程是程序的基本 ...
- IdentityServer4【QuickStart】之使用asp.net core Identity
使用asp.net core Identity IdentityServer灵活的设计中有一部分是可以将你的用户和他们的数据保存到数据库中的.如果你以一个新的用户数据库开始,那么,asp.net co ...
- freemarker数值格式化
语法:number?string(exp) 说明:根据给定的格式化表达式将数值格式化为字符串. 参数:格式化字符串,"0"表示固定占位(至少有这个位数,不足位数用0代替),&quo ...
- Thread(生产者和消费者) wait、notify、notifyAll
在java中,线程间的通信可以使用wait.notify.notifyAll来进行控制.从名字就可以看出来这3个方法都是跟多线程相关的,但是可能让你感到吃惊的是:这3个方法并不是Thread类或者是R ...
- CMake--List用法
list(LENGTH <list><output variable>) list(GET <list> <elementindex> [<ele ...
- 【学亮IT手记】jQuery text()/html()回调函数实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- webpack+vue 我的视角(持续更新)
最近一直在研究webpack+vue的组合拳,现在分享一下: webpack就是一个项目管理工具,可以各种模块化加载,然后压缩,当然还有热加载技术(时灵时不灵..) vue是mv*模式的框架,组件化开 ...
- Linux 系统命令行入门基础
Linux 命令行组成结构 打包及压缩命令 tar 解压压缩包:
- GitHub & OAuth 2.0 & JWT
GitHub & OAuth 2.0 & JWT https://www.rfcreader.com/#rfc6749 GitHub & OAuth https://www.b ...
- 老男孩python学习自修第九天【yield生成器】
1.如果在一个方法中有yield关键字则该方法返回的是一个生成器对象 2.对生成器对象进行操作必须进行迭代或循环处理 例如: yield_test.py #!/usr/bin/env python # ...