微信小程序canvas 实现信用图表

最新推荐文章于 2021-05-07 22:42:27 发布
最新推荐文章于 2021-05-07 22:42:27 发布
阅读量2.7k 收藏 1
点赞数 2
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VickyWinner/article/details/79247678
版权

前言：APP当时模仿着阿里支付宝画了一个图标，当初是以java去实现的。现在在开发公司的微信小程序，又根据当时写的代码通过微信小程序canvas的相关接口。从头又画了一次，对微信小程序的canvas理解更加深刻了。在这里直接贴一下代码，记录一下。也给需要的小伙伴一些参考。

效果图：


wxml：

<!--pages/mine/report/report.wxml-->
<view class='container'>
  <canvas canvas-id="credit-canvas" class='credit-canvas'></canvas>

</view>
js： 

// pages/mine/report/report.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    canvasWidth: 0,
    canvasHeight: 0,
    currentNum: 500,
    timeText:"2017-12"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //获取画布大小
    const that = this;
    wx.createSelectorQuery().select(".credit-canvas").boundingClientRect(function (rect) {
      that.setData({
        canvasWidth: rect.width,
        canvasHeight: rect.height
      })
    }).exec()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.drawCredit();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.timeout = setTimeout(this.drawCredit, 100);
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  drawCredit: function () {
    const that = this;
    const ctx = wx.createCanvasContext('credit-canvas');
    // 圆弧半径
    const radius = this.data.canvasWidth * 3 / 10;
    // 内圆宽度
    const sweepInWidth = 10;
    // 外圆宽度
    const sweepOutWidth = 3;
    // 圆弧初始的弧度
    const startAngle = 0.9 * Math.PI;
    // 圆弧结束的弧度
    const endAngle = 2.1 * Math.PI;
    // 圆弧扫过的弧度
    const sweepAngle = 1.2 * Math.PI;
    // 信用分值
    let currentNum = that.data.currentNum
    // 信用评级
    const leverText = ["C", "CC", "CCC", "B", "BB", "BBB", "A", "AA", "AAA"];
    // 信用等级
    const creditLeverText = ["差", "欠佳", "一般", "较好", "良好", "优良"];
    ctx.translate(this.data.canvasWidth / 2, this.data.canvasHeight * 3 / 4);
    // 画内外圆弧
    function drawRound() {
      // 内圆
      // 保存画布
      ctx.save();
      // 每次设置画笔时要调用这个beginPath，非则以最后一次为准。
      ctx.beginPath();
      // 设置画笔宽度
      ctx.setLineWidth(sweepInWidth);
      // 设置画笔颜色
      ctx.setStrokeStyle('rgba(255, 255, 255, 0.2)')
      // 画内圆弧形，角度为162度~378度，起始位置由于调用过ctx.translate(this.data.canvasWidth/2,this.data.canvasHeight*3/4);，所以在中心位置
      ctx.arc(0, 0, radius, startAngle, endAngle);
      // 描绘路径边框
      ctx.stroke();
      // 画外圆
      ctx.beginPath()
      ctx.setLineWidth(sweepOutWidth);
      ctx.setStrokeStyle('rgba(255, 255, 255, 0.2)')
      ctx.arc(0, 0, radius + 10, startAngle, endAngle);
      ctx.stroke();
      // 还原画布
      ctx.restore();
    }

    function drawScale() {
      // 画刻度
      const startNum = 300;
      // 画布旋转弧度
      const angle = 6 * Math.PI / 180;
      ctx.save();
      ctx.rotate((-1.5 * Math.PI) + startAngle)
      for (let i = 0; i <= 36; i++) {
        if (i % 6 === 0) {
          //画粗刻度并写数值
          ctx.beginPath()
          ctx.setLineWidth(2)
          ctx.setStrokeStyle('rgba(255, 255, 255, 0.7)')
          ctx.moveTo(0, -radius - sweepInWidth / 2);
          ctx.lineTo(0, -radius + sweepInWidth / 2 + 1);
          ctx.stroke()

          // 设置文字画笔          
          ctx.setFontSize(9)
          ctx.setTextAlign('center')
          ctx.setFillStyle('rgba(255, 255, 255, 0.4)')
          if (i === 36) {
            ctx.fillText(">1000", 0, -radius + 15)
          } else if (i === 0) {
            ctx.fillText("0-300", 0, -radius + 15)
          } else {
            ctx.fillText(startNum + (i / 6 * 100) + "", 0, -radius + 15)
          }
        } else {
          ctx.beginPath()
          ctx.setLineWidth(1)
          ctx.setStrokeStyle('rgba(255, 255, 255, 0.4)')
          ctx.moveTo(0, -radius - sweepInWidth / 2);
          ctx.lineTo(0, -radius + sweepInWidth / 2 + 1);
          ctx.stroke()
        }
        if (i === 3 || i === 9 || i === 15 || i === 21 || i === 27 || i === 33) {
          ctx.fillText(leverText[((i - 3) / 6) + 3], 0, -radius + 15)
        }
        ctx.rotate(angle)
      }
      // 还原画布
      ctx.restore();
    }

    function drawIndicator() {
      ctx.save();
      let sweep = 0;
      if (currentNum <= 300) {
        sweep = 0;
      } else if (currentNum <= 800 && currentNum > 300) {
        sweep = (currentNum - 300) * sweepAngle / 600;
      } else if (currentNum > 800 && currentNum <= 1000) {
        sweep = (5 * sweepAngle / 6) + ((currentNum - 800) * sweepAngle / 1200);
      } else {
        sweep = sweepAngle;
      }

      // 画指示点圆弧
      const grd = ctx.createLinearGradient(0, 0, 200, 0)
      grd.addColorStop(0, 'rgba(255, 255, 255, 0.4)')
      grd.addColorStop(1, 'rgba(255, 255, 255, 0.7)')
      ctx.beginPath()
      ctx.setStrokeStyle(grd)
      ctx.setLineWidth(sweepOutWidth);
      ctx.arc(0, 0, radius + 10, startAngle, startAngle+sweep);
      ctx.stroke()
      // 画指示点
      let x = (radius + 10) * Math.cos(startAngle + sweep)
      let y = (radius + 10) * Math.sin(startAngle + sweep)
      ctx.beginPath()
      ctx.setStrokeStyle('white')
      ctx.fill()
      ctx.arc(x,y,3,0,2*Math.PI)
      ctx.stroke()
      // 还原画布
      ctx.restore();
    }

    function drawCenterText(){
      ctx.save();
      //设置文字画笔
      ctx.beginPath();
      ctx.setFontSize(radius/6)
      ctx.setTextAlign('center')
      ctx.setFillStyle('white')
      let lever="信用等级："
      if (currentNum < 100) {
        lever += leverText[0];
      } else if (currentNum >= 100 && currentNum < 200) {
        lever += leverText[1];
      } else if (currentNum >= 200 && currentNum < 300) {
        lever += leverText[2];
      } else if (currentNum >= 300 && currentNum < 400) {
        lever += leverText[3];
      } else if (currentNum >= 400 && currentNum < 500) {
        lever += leverText[4];
      } else if (currentNum >= 500 && currentNum < 600) {
        lever += leverText[5];
      } else if (currentNum >= 600 && currentNum < 700) {
        lever += leverText[6];
      } else if (currentNum >= 700 && currentNum < 800) {
        lever += leverText[7];
      } else if (currentNum >= 800) {
        lever += leverText[8];
      }
      ctx.fillText(lever, 0, -radius / 2)

      // 绘制信用分值
      ctx.setFontSize(radius / 4)
      ctx.fillText(currentNum, 0, -radius / 6)

      // 绘制信用评估
      let content = "信用";
      let maxNum=1000;
      if (currentNum < maxNum * 4 / 10) {
        content += creditLeverText[0];
      } else if (currentNum >= maxNum * 4 / 10 && currentNum < maxNum * 5 / 10) {
        content += creditLeverText[1];
      } else if (currentNum >= maxNum * 5 / 10 && currentNum < maxNum * 6 / 10) {
        content += creditLeverText[2];
      } else if (currentNum >= maxNum * 6 / 10 && currentNum < maxNum * 7 / 10) {
        content += creditLeverText[3];
      } else if (currentNum >= maxNum * 7 / 10 && currentNum < maxNum * 8 / 10) {
        content += creditLeverText[4];
      } else if (currentNum >= maxNum * 8 / 10) {
        content += creditLeverText[5];
      }
      ctx.setFontSize(radius / 4)
      ctx.fillText(content, 0, radius / 8)

      // 评估时间
      ctx.setFontSize(15)
      ctx.setFillStyle('rgba(255,255,255,0.4)')
      ctx.fillText("评估时间：" + that.data.timeText, 0, radius / 3)

      // 还原画布
      ctx.restore();

      console.log("正在画画.....")
    }

    drawRound();
    drawScale();
    drawIndicator();
    drawCenterText();
    ctx.draw()
  },

})


wxss：

/* pages/mine/report/report.wxss */
page{
  height: 100%;
}

.credit-canvas{
  width: 100%;
  height: 35%;
  background-image: url("http://www.datacubr.com/img/bg_report.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}




VikcyWinner
关注
专栏目录
微信小程序开发中的数据可视化与图表展示
wx_linying1029的博客
08-15 268
你可以根据自己的需求，使用微信小程序自带的图表组件或者第三方图表库，来展示不同类型的图表。你可以根据第三方库的使用文档，调整配置项和数据，实现不同类型的图表展示。你可以根据自己的需求，调整配置项和数据，实现不同类型的图表展示。微信小程序提供了一个基础的图表组件，可以用来展示柱状图、折线图、饼图等常见的图表类型。除了微信小程序自带的图表组件，还有一些第三方的图表库可以帮助我们更丰富地展示数据。在需要展示图表的页面的wxml文件中，添加图表组件。在需要展示图表的页面的wxml文件中，添加图表组件。
微信小程序canvas画布实现直线自由缩放、移动功能
最新发布
tl437002770的博客
01-29 561
微信小程序canvas画布实现直线自由缩放、移动功能
微信小程序-基于微信小程序canvas的图表控件，适用于wepy框架
08-06
微信小程序 wepyjs 图表控件 wepy-com-charts 说明 基于微信小程序canvas开发的图表控件，适用于wepy框架 > 暂时只有折线图，后续提供更多的图表 使用 安装组件 npm install wepy-com-charts --save 引用组件 import wepy from 'wepy'; import Charts from 'wepy-com-charts'; export default class Index extends wepy.page { components = { lineChart: Charts }; } 调用方法 //调用draw方法可以产出图像 this.$invoke('lineChart', 'draw'); Props传值说明 属性 默认值 类型 必填 说明 collection [] array 是 图表数据，格式如下：[ {name:'line name',data:[{key:'对应label的值',
canvas仿芝麻信用分仪表盘
weixin_34352449的博客
11-14 509
hi，这是一个仿支付宝芝麻信用分的一个canvas，其实就是一个动画仪表盘。 首先， 上原图： 这个是在下支付宝上的截图，分低各位见笑了。然后看下我用canvas实现的效果图： <canvas id="canvas" width="400" height="700" data-score='724'></canvas&...
js canvas仿支付宝芝麻信用分仪表盘
10-21
主要为大家详细介绍了js canvas仿支付宝芝麻信用分仪表盘,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在小程序中用canvas画一个仪表盘
紫一的博客
05-07 1055
最终效果图 wxml <view class="top-box"> <canvas class="canvas-box" canvas-id='canvas'></canvas> </view> js onReady: function () { this.initCanvas() }, initCanvas() { let windowsWidth = app.globalData.windowWidt
HTML5 Canvas 仿支付宝芝麻信用统计图表.rar
07-10
HTML5 Canvas 仿支付宝芝麻信用统计图表特效，一个建立在HTML5基础上的统计图表，动态效果显示，看上去十分美观且显专业，在支付宝芝麻信用中就是采用的这种风格。这些图表效果除了使用HTML5 Canvas技术外，还使用了几个外部的JS插件：chart.radar.js、chart.pie.js、chart.meter.js，已打包在源码包中，且本效果在移动端和PC端的Chrome、Opera等浏览器下，有较好的表现。
微信小程序demo：利用canvas绘制折线图
03-15
在这个“微信小程序demo：利用canvas绘制折线图”的项目中，我们将探讨如何利用HTML5的Canvas API在微信小程序环境中创建动态的、交互式的折线图表。 Canvas是一个基于矢量图形的HTML元素，它可以用来在网页上动态...
微信小程序demo：基于canvas的动态柱状图
03-15
这个示例将帮助你理解如何在微信小程序中利用Canvas实现动态数据可视化，这对于构建各种统计图表或游戏场景都非常有用。 总之，这个"微信小程序demo：基于canvas的动态柱状图"项目旨在展示如何在微信小程序环境下...
微信小程序遍历Echarts图表实现多个饼图
10-17
微信小程序遍历Echarts图表实现多个饼图的知识点主要集中在以下几个方面： 1. 微信小程序与Echarts图表的集成：微信小程序作为前端开发框架，可以嵌入Echarts图表来实现数据的可视化展示。Echarts是一个使用...
小程序Canvas制作表盘
Jon Son的博客
06-11 2439
小程序canvas制作表盘 小程序中使用canvas如何制作表盘呢？刚开始接触小程序canvas的时候，脑袋都大了一圈，实现功能了又太耗性能，优化了性能，功能又出问题了。刚好手上有个实时监测pm2.5的项目，花了点时间把其中的canvas表盘扣出来做了一个组件 实现思路 画背景 先画圆（刻度间有间隔）——> 再给每个方位设置上刻度值（坐标点调了半天） 实现进度动画 设定区间变更的颜色...
微信小程序仪表盘组件带刻度进度
03-18
微信小程序仪表盘组件带刻度进度
canvas画简洁风格仪表盘
02-22
canvas画简洁风格仪表盘，适用于cpu、内存等信息的监控显示。
html5 canvas支付宝信用数据统计图表插件
11-06
html5 canvas支付宝信用数据统计图表插件 html5 canvas支付宝信用数据统计图表插件
微信小程序F2自定义图表组件
08-10
微信小程序 F2 自定义图表组件
html5实现的网络拓扑图
02-17
是一个基于HTML5技术实现的网络拓扑图，可以实现数据序列化与反序列化，拖拽。 涉及到的类库： kinetic-js jquery-easyui jquery
canvas仿芝麻信用分画的一个刻度表(可根据分数变色)
井井
09-10 2352
有些时间没练习canvas了，感觉好像略有生疏，这次是canvas仿芝麻信用分画了一个刻度表，没有特别难的地方，不过在计算时也算折腾了一番。因为需要有五种状态，所以根据传入的值，进入了五种判断，并给字的颜色、圆环的颜色、信用评价、分数在圆环中的位置进入一些赋值与计算，其它就是画canvas。
用canvas写仿支付宝中的芝麻信用分的效果
weixin_30300225的博客
08-22 305
老早写了一个商城的项目，其中有一个很有意思的东西就是仿淘宝芝麻信用那个转圈的效果，当初也是看人家的代码，刚开始看到时候有点懵，后来看了几天总算弄明白原理了，效果图如下： 代码先贴上：最近有点忙，权当记录： <!DOCTYPE html> <html> <head> <meta charset="UTF-8">...
微信小程序canvas图形制作-radar雷达图
qq_36840434的博客
03-29 3986
    最近小程序很火，博主作为新人也去了解一下，发现小程序的确有其优势之处，就是还不是很完善，当然这是一个新的东西免不了存在各种问题，相信以后问题会减少。    正文开始。    在学习过程中我用微信canvas去画了一个雷达图，嘛，毕竟图形才是直观的数据体现。    博主是采用的微信自主研发的类vue框架wepy来进行开发的，如果有不了解wepy的小伙伴可以去腾讯的wepy官方文档看看，较之原...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值