小程序图表 - wxCharts ,圆环图的应用

本文介绍如何在微信小程序中使用wxCharts库实现人脸对比的圆环图展示,包括代码示例和关键配置参数,如动画、颜色设置、数据绑定及触摸事件处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

GitHub:https://github.com/xiaolin3303/wx-charts

使用说明:Example - wxCharts使用说明

参数说明:参数说明 - wxCharts使用文档

Demo:https://github.com/xiaolin3303/wx-charts-demo

 

前两天做人脸对比小程序页面,要求用圆环图显示,中间显示相似度,效果如下:

搜了半天,最后上作者的github比对着评论区一位老哥的代码,终于实现了,代码如下:

1、页面定义图表显示区域 - face_contrast.wxml

<canvas canvas-id="pieCanvas" class="canvas" style="height:200px;width:200px;" bindtouchstart="touchHandler">
</canvas>
<view>
<button class="weui-btn blue" hover-class='bluehover' bindtap="faceContact">人脸对比</button>
</view>

2、触发的方法 - util.js、face_contrast.js

var pieChart=null;
var windowWidth = 320;
var mathchColor = "#4c71ff";          
var unmatchColor = "#f4f4f4";

function echarts1(score){
  pieChart = new wxCharts({
    animation: true,
    canvasId: 'pieCanvas',
    type: 'ring',
    series: [{
      name: '',
      data: score,
      color: mathchColor
    }, {
      name: '',
      data: 100 -score,
      color: unmatchColor
    }],
    extra: {
      pie: {
        offsetAngle: -90
      },
      ringWidth: 10
    },
    title: {
      name: '相似度' +score + '%',
      color: '#666666',
      fontSize: 16
    },

    width: 200,
    height: 200,
    dataLabel: false,         //是否在图表中显示数据内容值           
    legend: false,            //是否显示图表下方各类别的标识
    disablePieStroke: true    //不绘制饼图(圆环图)各区块的白色分割线
  });
}

module.exports = {
  echarts1: echarts1    
}

 

var util = require('../../utils/util.js');
...

  // data
  data: {
    img1: "", img2: "",image1:'',image2:'',score:0
  },
  touchHandler: function (e) {
    // console.log(util.pieChart.getCurrentDataIndex(e));
  },
  // lifecycle
  onLoad: function (e) {
    // try {
    //   var res = wx.getSystemInfoSync();
    //   windowWidth = res.windowWidth;
    // } catch (e) {
    //   console.error('getSystemInfoSync failed!');
    // }
    util.echarts1(this.data.score)
  },
 chooseImage: function (e) {
    var that = this;
    var index = e.currentTarget.dataset.index;//获取当前图片下标
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        console.log(res.tempFilePaths[0]);
        var base = wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], "base64");

        if (index == 1) {
          that.setData({
            img1: res.tempFilePaths[0],   //图片地址,前端显示
            image1: base                  //图片转为base64后台处理
          })
        }
        if (index == 2) {
          that.setData({
            img2: res.tempFilePaths[0],
            image2: base
          })

        }
      }
    })
  },
 
// methods
  faceContact:function(e){
    let _this=this;
    wx.showLoading({
      title: '对比中,请稍等!',
    })
    wx.request({
      url: `${config.api_server}/faceapp/api/v1/faceMatch`,
      method:'post',
      data:{
        image1: _this.data.image1,
        image2:_this.data.image2
      },
      success:function(e){
        console.log('score', e)
        wx.hideLoading()
        if (e.data.data){
          util.echarts1(e.data.data)
        }else{
          wx.showModal({
            content: e.data.errorMsg,
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                util.echarts1(0)
                console.log('用户点击确定')
              }
            }
          });
        }
      },
    })
  }

 

### 微信小程序环形仪表盘实现方案 #### 使用 CSS 和 Canvas 的方式实现环形仪表盘 通过 `CSS` 变换属性可以轻松创建圆形的仪表盘效果[^1]。然而,如果需要更复杂的交互功能或者动态数据展示,则推荐使用 `Canvas` 来绘制环形仪表盘[^2]。 以下是基于 `Canvas` 的实现方法: ```javascript Page({ data: { dashboardValue: 75, maxValue: 100, angleStep: (this.data.dashboardValue / this.data.maxValue) * 180, }, drawDashboard() { const ctx = wx.createCanvasContext('dashboardCanvas'); // 背景圆弧 ctx.setLineWidth(10); ctx.setStrokeStyle('#eaeaea'); ctx.beginPath(); ctx.arc(100, 100, 90, Math.PI, 0); // 径为90像素,起始角度Math.PI到结束角度0 ctx.stroke(); // 前景色圆弧(表示当前值) let currentAngle = ((this.data.dashboardValue / this.data.maxValue) * Math.PI).toFixed(2); ctx.setLineWidth(15); ctx.setStrokeStyle('#4caf50'); // 设置颜色为绿色 ctx.beginPath(); ctx.arc(100, 100, 90, Math.PI, Math.PI - currentAngle); // 动态计算角度 ctx.stroke(); // 中心文字显示数值 ctx.setFontSize(20); ctx.setFillStyle('#333'); ctx.setTextAlign('center'); ctx.fillText(`${this.data.dashboardValue} %`, 100, 100); ctx.draw(); }, onLoad() { this.drawDashboard(); // 页面加载时调用布函数 } }); ``` 上述代码展示了如何利用 `Canvas API` 创建一个简单的环形仪表盘,并支持动态更新数值。 #### 利用微信小程序第三方插件实现环形图表 对于更加复杂的需求,可以直接引入成熟的微信小程序图表库,比如 **wxcharts** 插件来快速构建环形组件[^3]。下面是一个基本配置实例: ```javascript const app = getApp(); var wxCharts = require('../../utils/wxcharts.js'); Page({ onReady() { var ringChart = new wxCharts({ canvasId: 'ringCanvas', type: 'ring', series: [{ name: '已完成', data: 75 }, { name: '未完成', data: 25 }], width: 320, height: 200, extra: { pie: { offsetAngle: -45 // 自定义偏移角 } }, title: { name: '进度', color: '#7cb5ec', fontSize: 16 }, subtitle: { name: '%' } }); } }); ``` 此示例中,我们初始化了一个饼状作为环形仪表盘的一部分,其中包含了两个部分的数据:已完成功能占比和剩余待办事项比例。 --- ###
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值