欢迎您光临本站
faddei头像
faddei

2021-07-10

评论者
微信小程序
0 1

一、首先下载封装好的js到utils文件夹下

1574063642675296.zip

二、在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
          }
        }
      })
    }
})



版权声明:本站所提供的文章、图片等内容均为用户发布或互联网整理而来,仅供学习参考,如有侵犯您的版权,请联系我们客服人员删除。

190

精彩推荐

暂无评论

文明用语