IT基地
用户登陆
我要注册
用户名或密码错误
登 陆
注 册
IT基地 >Mr.Li的博客 >我要发文
微信小程序-卫星图绘制
作者:Mr.Li   发布时间:2019-11-18 16:07:31   点击数:27

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

  js文件点击下载:wxcharts.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
          }
        }
      })
    }
})


本站部分数据来自软件的自动采集,仅用于学习交流,决不用于商用,如有侵犯您的合法权益,请联系我们删除。
发表技术文档,,记录个人生活,聚集意见领袖,众多IT精英,以我们的技术让开发更便捷。
IT基地版权所有,伪版必究 京ICP备17064610号-1
微信QQ空间QQ好友新浪微博FacebookTwitter