├── .gitignore ├── README.md ├── app.js ├── app.json ├── app.wxss ├── example.PNG └── pages └── index ├── index.js ├── index.wxml └── index.wxss /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 作者 2 | 马兆铿 2017-7-1 3 | ## 项目说明 4 | 自制微信小程序柱状图，带有点击步数上升动画。按照750px的大小设计，在小程序上是适应屏幕的。 5 | 6 | ![图示](example.PNG) 7 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | }, 5 | getUserInfo: function (cb) { 6 | var that = this; 7 | /* if (this.globalData.userInfo) { 8 | typeof cb === "function" && cb(this.globalData.userInfo) 9 | } else {*/ 10 | //调用登录接口 11 | wx.login({ 12 | success: function (res) { 13 | that.globalData.code = res.code; 14 | console.log(res.code); 15 | wx.getUserInfo({ 16 | success: function (res) { 17 | that.globalData.userInfo = res.userInfo; //获取用户信息 18 | that.globalData.userEncryptedData = res.encryptedData; //加密的用户重要信息 19 | that.globalData.iv = res.iv; //获取iv值 20 | typeof cb === "function" && cb(that.globalData.userInfo) 21 | } 22 | }) 23 | } 24 | }) 25 | //} 26 | }, 27 | globalData: { 28 | userInfo: null, //用户基本信息 29 | } 30 | }); -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index" 4 | ], 5 | "window":{ 6 | "backgroundTextStyle":"light", 7 | "navigationBarBackgroundColor": "#000", 8 | "navigationBarTitleText": "柱状图", 9 | "navigationBarTextStyle":"white" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**公用样式**/ 2 | view{ 3 | margin: 0; 4 | padding: 0; 5 | } 6 | /*页面包裹*/ 7 | .container { 8 | height: 100%; 9 | box-sizing: border-box; 10 | line-height: 1; 11 | } -------------------------------------------------------------------------------- /example.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeng/barGraph-miniProgram-weixin/9305be5b4de1c56cd478ce45b90df712637f276c/example.PNG -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | var app = getApp(); 4 | 5 | Page({ 6 | /*-------------------------------------------- 数据 ----------------------------------------------*/ 7 | data: { 8 | //步数列表 9 | stepList: { 10 | step: [2000,5000,3000,2563,125,22521,621], //字符串 11 | barHeight: [], 12 | barTop: 300, 13 | stepTop: 20000, 14 | showingStepIdx: 6, //显示步数的index 15 | todayStep: 621, //今天步数 16 | date: [24,25,26,27,28,29,30] //字符串 17 | } 18 | }, 19 | /*-------------------------------------------- 自定义函数 ----------------------------------------------*/ 20 | /* 设置柱状图 21 | * */ 22 | setGraph: function () { 23 | var that = this; 24 | that.data.stepList.step.forEach(function(item,idx){ 25 | if ( item > that.data.stepList.stepTop ){ //防止超出 26 | that.data.stepList.barHeight[idx] = that.data.stepList.barTop; 27 | }else{ 28 | var scale = that.data.stepList.barTop / that.data.stepList.stepTop; //转换比例 29 | that.data.stepList.barHeight[idx] = parseInt(item * scale); 30 | } 31 | }); 32 | that.setData({ 33 | stepList: that.data.stepList 34 | }); 35 | }, 36 | /*-------------------------------------------- 绑定函数 ----------------------------------------------*/ 37 | /* 加载完成 38 | * */ 39 | onLoad: function () { 40 | this.setGraph(); 41 | }, 42 | 43 | /* 点击日期显示步数 44 | * @param e对应的事件 45 | * */ 46 | showStepTap: function (e) { 47 | let that = this; 48 | that.data.stepList.showingStepIdx = e.currentTarget.dataset.idx; //idx:wxml中绑定的序号,显示的数据变动 49 | that.setData({ 50 | stepList: that.data.stepList 51 | }); 52 | } 53 | }); 54 | -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 一周步数 7 | 今日步数：{{stepList.todayStep}} 8 | 9 | 10 | 11 | 12 | 2W 13 | 1.5W 14 | 1W 15 | 16 | 19 | 21 | 22 | 23 | {{item}} 26 | 27 | 28 | 29 | {{item}} 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /*柱状图*/ 2 | .graph{ 3 | width: 690rpx; 4 | height: 423rpx; 5 | margin: 42rpx auto 20rpx; 6 | background: #1c8d9f; /* 一些不支持背景渐变的浏览器 */ 7 | background:-webkit-gradient(linear, 0 0, right bottom, from(#2cbb85), to(#1c8d9f)); 8 | border-radius: 8rpx; 9 | position: relative; 10 | } 11 | .graph-head{ 12 | width: 82%; 13 | height: 76rpx; 14 | line-height: 76rpx; 15 | margin: 0 auto; 16 | color: #fff; 17 | font-size: 30rpx; 18 | position: relative; 19 | } 20 | .graph-head-today{ 21 | position: absolute; 22 | font-size: 22rpx; 23 | line-height: 30rpx; 24 | height: 30rpx; 25 | top: 32rpx; 26 | right: -20rpx; 27 | color: #fff; 28 | } 29 | /*柱状图content*/ 30 | .graph-content{ 31 | width: 653rpx; 32 | height: 300rpx; 33 | margin: 0 auto; 34 | background:-webkit-gradient(linear, 0 0, 0 bottom, from(transparent), to(rgba(255,255,255,.1))); 35 | position: relative; 36 | } 37 | /*柱子*/ 38 | .graph-content-bar{ 39 | border-radius: 6rpx; 40 | background: rgba(255,255,255,.5); 41 | position: absolute; 42 | bottom: 0; 43 | left: 50%; 44 | margin-left: -6rpx; 45 | width: 12rpx; 46 | height: 0; 47 | transition: height 500ms; 48 | } 49 | /*柱子外层包裹*/ 50 | .graph-content-bar-wrap{ 51 | width: 50rpx; 52 | margin-left: -18rpx; 53 | position: absolute; 54 | top: 0; 55 | height: 100%; 56 | } 57 | /*y轴线*/ 58 | .graph-content-line{ 59 | position: absolute; 60 | left: 7%; 61 | width: 86%; 62 | height: 0; 63 | } 64 | .line1{ 65 | top: 0; 66 | border-bottom: 1rpx dotted #fff; 67 | } 68 | .line2{ 69 | top: 25%; 70 | border-bottom: 1rpx dotted rgba(255,255,255,0.5); 71 | } 72 | .line3{ 73 | top: 50%; 74 | border-bottom: 1rpx dotted rgba(255,255,255,0.5); 75 | } 76 | .graph-content-line text{ 77 | display: block; 78 | position: absolute; 79 | top: -50%; 80 | left: 102%; 81 | color: #fff; 82 | width: 28rpx; 83 | height: 28rpx; 84 | line-height: 28rpx; 85 | font-size: 22rpx; 86 | margin-top: -14rpx; 87 | } 88 | /*列表共通*/ 89 | .graph-li{ 90 | font-size: 22rpx; 91 | position: absolute; 92 | line-height: 1; 93 | text-align: center; 94 | } 95 | .bar-left-0{ 96 | left: 50rpx; 97 | } 98 | .bar-left-1{ 99 | left: 140rpx; 100 | } 101 | .bar-left-2{ 102 | left: 230rpx; 103 | } 104 | .bar-left-3{ 105 | left: 320rpx; 106 | } 107 | .bar-left-4{ 108 | left: 410rpx; 109 | } 110 | .bar-left-5{ 111 | left: 500rpx; 112 | } 113 | .bar-left-6{ 114 | left: 590rpx; 115 | } 116 | /*步数*/ 117 | .graph-content-step{ 118 | position: absolute; 119 | margin-left: -38rpx; 120 | text-align: center; 121 | top: 100%; 122 | color: #fff; 123 | transition: all 500ms; 124 | width: 90rpx; 125 | font-size: 22rpx; 126 | opacity: 0; 127 | } 128 | .top-2percent{ 129 | top: 2rpx; 130 | opacity: 1; 131 | } 132 | /*日期*/ 133 | .graph-date view{ 134 | margin-left: -30rpx; 135 | bottom: 13rpx; 136 | color: #fff; 137 | color: rgba(255,255,255,.5); 138 | width: 110rpx; 139 | } --------------------------------------------------------------------------------