小程序根據分值顯示進度（餅圖和進度條）

 

wxml:

<view class="score">
        <!-- 餅圖 -->
        <view class="s_cookies">
          <canvas canvas-id="ringCanvas" class="canvas" bindtouchstart="touchHandler"></canvas>
          <image src="{{radarImg}}" style="width: 260rpx; height: 270rpx;" class="lucky-index-img" />
        </view>
        <!-- 進度條 -->
        <view class="s_progress">
          <view wx:for="{{series}}" wx:key="item.name">
            <text style="width:35%;">{{item.name}}</text>
            <progress class="s_prg" percent="{{item.data}}" border-radius="10" stroke-width="12" active-color="{{item.color}}" active/>
            <text>+{{item.data}}分</text>
          </view>
        </view>
      </view>

wxss:

.score{
    display: flex;
    justify-content: space-between;
}
.canvas{
   border:1rpx solid #f2f2f2;
    display: block;
    position: fixed;
    left: 9999rpx;
    z-index: 0;
     width: 260rpx;
    height: 270rpx; 
     padding: 0; 
}
.s_progress{
    margin-top: 80rpx;
    margin-right: 4%;
}
.s_progress text{
    width: 20%;
    font-size: 25rpx;
}
.s_progress view{
    display: flex;
}
.s_progress view:nth-child(4){
    display: none;
}
.s_prg{
    width: 170rpx;
    overflow: hidden;
    border-radius: 100px;
    margin-left: 7px;
}

js:

var wxCharts = require('../../../utils/wxcharts.js');//引入圖表插件
var app = getApp();
var ringChart = null;
Page({
    data: {
        T_bg: "",
        series: [{
                name: '音樂感受力',
                data: 0,
                color: "#FF777B",
                stroke: true
            }, {
                name: '節奏感',
                data: 0,
                color: "#226AF9",
                stroke: true
            }, {
                name: '音準概念',
                data: 0,
                color: "#04CB9C",
                stroke: true
            },
            {
                name: '失分',
                data: 100,
                color: "#f2f2f2" //失分餅圖顏色
            }
        ],
        title: 0,
        appraise: [], //評價
        radarImg: '', //圓形圖片
    },
    touchHandler: function(e) {
        console.log(ringChart.getCurrentDataIndex(e));
    },
    /**
     * 生命週期函數--監聽頁面加載
     */
    onLoad: function(options) {
        var that = this;
        let ctx = wx.createCanvasContext("ringCanvas", this); //根據wxml定義的canvas-id來創建繪圖context對象。
        ctx.draw(false, () => {
            // 延遲保存圖片，解決生成圖片錯位bug。
            setTimeout(() => {
                this.canvasToTempImage();
            }, 100);
        });
        // 處理綁定手機號後傳過來的數據
        let score = JSON.parse(options.score)
        let judge = JSON.parse(options.judge)
        let { all,all_m,all_r, all_i} = judge;
        let _appraise = [all, all_m, all_r, all_i];
        let { all_num, music_tivity,rhythm_num,intonation_num} = score;
        let _series = that.data.series;
        let _score = [music_tivity, rhythm_num, intonation_num, 100 - all_num];
        for (let i in _series) {
            _series[i].data = _score[i]
        }
        that.setData({
            T_bg: options.jsonTest,//背景圖
            appraise: _appraise,
            series: _series,
            title: all_num
        })
    },
   //將餅圖繪製出來給radarImg
    canvasToTempImage: function() {
        wx.canvasToTempFilePath({
            canvasId: "ringCanvas",
            success: (res) => {
                let tempFilePath = res.tempFilePath;
                this.setData({
                    radarImg: tempFilePath,
                });
            }
        }, this);
    },
    /**
     * 生命週期函數--監聽頁面初次渲染完成
     */
    onReady: function(e) {
        //使用基於canvas的圖表插件wxCharts
        ringChart = new wxCharts({
            animation: false,
            canvasId: 'ringCanvas',
            type: 'ring',
            extra: {
                ringWidth: 20,
                pie: {
                    offsetAngle: -45
                }
            },
            title: {
                name: this.data.title + '分',
                color: '#FD6757',
                fontSize: 18
            },
            series: this.data.series,
            disablePieStroke: true,
            width: 140,
            height: 140,
            dataLabel: false,
            legend: false,
            background: '#fff', //總分背景色
        });
    },

    /**
     * 生命週期函數--監聽頁面顯示
     */
    onShow: function() {
       let  background =wx.getStorageSync("testbg");
       let { all_num, music_tivity, rhythm_num, intonation_num } = wx.getStorageSync("score");
       let sugges = wx.getStorageSync("judge");
       let that = this

      let _series = that.data.series;//分數數組
      let _score = [music_tivity, rhythm_num, intonation_num, 100 - all_num];//獲取到的分數
      for (let i in _series) {
        _series[i].data = _score[i]
      }
    that.setData({
      T_bg: background,//背景圖
      appraise: sugges,//評價
      series: _series,
      title: all_num//總分
    })

    },

})

總結：留下一個記錄.........

1.分值餅圖使用了基於canvas的圖表插件wxCharts

 2.將傳過來的數據處理放進進度條對應的分值裏面去