一、首先下载封装好的js到utils文件夹下
二、在wxml文件中创建画布
<view class="container"> <canvas canvas-id="radarCanvas" class="canvas"></canvas> </view>
相关样式如下，直接复制修改使用即可
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
font-size: 30rpx;
color: #333;
}
.canvas {
width: 100%;
height: 200px;
margin-left: -3%;
}三、在相关页面的JS中如此引用即可
var wxCharts = require('../../utils/wxcharts.js') // 引入wx-charts.js文件
var radarChart = null
Page({
//生命周期函数--监听页面初次渲染完成
onReady: function() {
//创建雷达图,满分150分 请用实际分数乘以30
var windowWidth = 320;
try {
var res = wx.getSystemInfoSync()
windowWidth = res.windowWidth
} catch (e) {
console.error('getSystemInfoSync failed!')
}
radarChart = new wxCharts({
canvasId: 'radarCanvas',
type: 'radar',
legend: false,
categories: ['能力4.5', '技能3.2', '业主评价4.6', '专业3.5', '信誉4.6'],
series: [{
name: '.',
color: '#64DAC1',
data: [90, 64, 92, 150, 92]
}],
width: windowWidth,
height: 200,
extra: {
radar: {
max: 150
}
}
})
}
}）版权声明：本站所提供的文章、图片等内容均为用户发布或互联网整理而来，仅供学习参考，如有侵犯您的版权，请联系我们客服人员删除。