微信小程序仪表盘组件
miniprogramRoot
配置的目录)中依次执行npm init
npm i weapp-plugin-dashboard -S --production
"usingComponents": {
"weapp-plugin-dashboard": "weapp-plugin-dashboard"
}
<weapp-plugin-dashboard />
完整的配置项及默认值如下:
<weapp-plugin-dashboard
min="0" // 最小值
max="100" // 最大值
val="50" // 当前值
width="750" // 组件宽度,单位rpx
height="400" // 组件高度,单位rpx
colors="{{myColors}}" // 仪表盘颜色分布
>
</weapp-plugin-dashboard>
...
data: {
myColors: [{
percent: 50,
color: '#67C23A'
}, {
percent: 80,
color: '#E6A23C'
}, {
percent: 100,
color: '#F56C6C'
}]
}
...