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

最新推荐文章于 2025-05-26 15:21:20 发布

原创最新推荐文章于 2025-05-26 15:21:20 发布 · 5.3k 阅读

6 ·

CC 4.0 BY-SA版权

ECharts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在微信小程序中使用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('用户点击确定')
              }
            }
          });
        }
      },
    })
  }