/radarCanvas

微信小程序 雷达图组件 component

Primary LanguageJavaScript

微信小程序组件

radarCanvas wxml中使用

  • 组件在wxml中使用：

建议放在wxml底部，可任意放置

  • 雷达图image组件显示：

radarCanvas中根据Id维护雷达图canvas，返回image参数来回显雷达图，Page中需维护image，本例中用变量名currentRadarImage来表示。

radarCanvas组件入参

1、aspectCanvas: {
        canvasWidth: 392,
        canvasHeight: 366,
        fontSize: 40,
        categories：['智商', '高贵', '暖心', '吃货', '颜值'],
        MaxDimension:5
    }

aspectCanvas：画雷达图canvas需要传入的基本绘制参数

  • canvasWidht：宽
  • canvasHeight：高
  • fontSize：各维度字体大小
  • categories：各个维度名称
  • MaxDimension:设置各维度最大值
2、radarData：{
        gender: 1,
        id: ‘m000225’,
        radarList: [2.5,5.0,5.0,12.5,10.0]
    }

radarData：画雷达图时所需要的数据参数

  • gender：1或者2，业务上，颜色判断，组件维护两组颜色数组，支持渐变与阴影（待完善，开发者本身维护需要的颜色）
  • id：id值，作为维护雷达图image的唯一Id
  • radarList：雷达图各维度数据值

radarCanvas组件监听事件

radarUpdate:radarCanvas组件canvas绘制完成输出图片监听事件

e.detail为获取输出图片。

radarCanvas代码片段链接

待附上(代码包过大，无法分享)

github地址链接

[https://github.com/MyNameisQiShiQi/radarCanvas.git]