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.将传过来的数据处理放进进度条对应的分值里面去