首先, 我们先看一下效果图
雷达图(Radar Chart),又可称为戴布拉图、蜘蛛网图(Spider Chart),是财务分析报表的一种。即将一个公司的各项财务分析所得的数字或比率,就其比较重要的项目集中划在一个圆形的图表上,来表现一个公司各项财务比率的情况,使用者能一目了然的了解公司各项财务指标的变动情形及其好坏趋向。
这边文章参考了https://www.jianshu.com/p/598b55aae7b7的博客,我拿到以后稍加修改了一些地方,变成了我想要的雷达图
类似这样的雷达图,用html5写和小程序写也是有一些不一样的
那么开始上菜
wxml
<view class='radarContainer'>
<canvas class='radarCanvas' canvas-id='radarCanvas'></canvas>
</view>
wxss
.radarContainer{
background: linear-gradient(#86d0d0, #81e1b4);
width:100%;
height:420px;
display: flex;
justify-content:center;
align-items: center;
position: relative;
}
.radarCanvas{
width:400px;
height:400px;
margin: 0 auto;
position: absolute;
}
js 准备基础数据,写在全局
var numCount = 6; //元素个数(6条边)
var numSlot = 5; //一条线上的总节点数
var mW = 400; //Canvas的宽度
var mCenter = mW / 2; //中心点
var mAngle = Math.PI * 2 / numCount; //角度
var mRadius = mCenter - 60; //半径(减去的值用于给绘制的文本留空间)
//获取指定的Canvas
var radCtx = wx.createCanvasContext("radarCanvas")