mpvue框架的微信小程序使用wx-chart环形图

效果图


点击不同区域 圆环内部内容和颜色会更改

首先
新建一个wxChart.js,传送门 点这里选择js/min.js都行，代码在60K/30K左右

接着
在需要使用环形图的页面引入js

import wxCharts from "../../utils/wxcharts.js";

定义参数

return {
      wxchart: {},
      canvasData: {},
      color: ["#5EAFFD", "#73D484", "#ba55d3", "#398FE3", "#FF9797", "#FFC785"]
    };

html

<canvas
            canvas-id="pieCanvas"
            disable-scroll="true"
            class="pieCanvas"
            ref="pieCanvas"
            @touchstart="updatatitle($event)"
 ></canvas>

这里的$event 和小程序原生的e一个意思。

---

渲染环形图canvas的方法

 getCharts(datas) {
      this.wxchart = new wxCharts(datas);
    },

获取环形图数据

 getPaymentTypeData() {
      var _this = this;
      _this.$wxhttp
        .post({
          url: "xxx", //连接的网址
          data: {
            date: _this.date
          } //需要的参数
        })
        .then(res => {
          if (res.status == 200) {
            var width = wx.getSystemInfoSync().windowWidth / 375; //因为这个环形图里面的宽高数据是木有单位的，不会随着手机屏幕比例变化，所以这里会按照手机比例来转换环形图的宽高
            console.log(width);
            //两个环形图
            var canvasData = {
              animation: false,  //动画效果，更新圆环里内容的时候有动画还去不掉，所以没开，
              canvasId: "pieCanvas",  //这个id就是canvas里的id 
              type: "ring",
              extra: {
                ringWidth: 28 * width,//这个是环形图环的宽度
                pie: {
                  offsetAngle: -90
                }
              },
              disablePieStroke: true,
              width: 210 * width,//这里 就是乘以比例了  
              height: 210 * width,
              dataLabel: false,
              legend: false,
              padding: 0,
              title: {},
              subtitle: {},
              series: []
            };
            var color = _this.color;

            //把接口返回的数据拼成wx-chart格式的
            for (var i = 0; i < res.data.length; i++) {
              console.log(i);
              var list = {
                name: res.data[i].payChannelName || res.data[i].payChannel,
                data: res.data[i].orderNumber,
                stroke: false,
                color: color[i],
                per: res.data[i].orderNumberPer
              };
              canvasData.series.push(list);
              
//这里是默认显示第一个数据的内容
              if (i == 0) {
                canvasData.title = {
                  name: res.data[i].payChannelName || res.data[i].payChannel,
                  color: "#999",
                  fontSize: 12 * width
                };
                canvasData.subtitle = {
                  name: res.data[i].orderNumberPer + "%",
                  color: color[i],
                  fontSize: 24 * width
                };

            }
            _this.canvasData = canvasData
            _this.getCharts(canvasData);
          } else {
            wx.showModal({
              title: "提示",
              content: res.msg,
              showCancel: false,
              success(res) {}
            });
          }
        });
    },

点击不同区域 中间更换内容和颜色

    updatatitle(e) {
      var index = this.wxchart.getCurrentDataIndex(e);
        //金额
        this.wxchart.updateData({
          title: {
            name: this.canvasData.series[index].name
          },
          subtitle: {
            name: this.canvasData.series[index].per + "%",
            color: this.canvasData.series[index].color
          }
        });
      
    },

小程序有canvas默认的样式 覆盖掉就行了

canvas {
  width: 400rpx !important;
  height: 440rpx !important;
  position: relative;
  left: 110rpx;
}

---

结束！！ヾ(◍°∇°◍)ﾉﾞ