更新记录

1.0.0(2021-07-27)

简单的CSS样式圆形饼图百分比

平台兼容性

Vue

App

微信小程序

支付宝小程序

百度小程序

字节小程序

QQ小程序

快应用

vue2

3.1.0 app-vue

√

×

×

×

×

×

H5-Safari

Android Browser

微信浏览器(Android)

QQ浏览器(Android)

Chrome

IE

Edge

Firefox

PC-Safari

√

√

√

√

√

×

×

×

×

css圆形饼图百分比

突然需要用到圆形百分比图就找了下，看到有个大佬发了一个js是做好的但是用的是jq做的放到uni上用不了，所有就把js代码拿过来自己修改了下。插件参考地址https://blog.csdn.net/weixin_33728268/article/details/89411706

虽然我们也能用charts去实现图形，但是就像大佬说的有点杀鸡用牛刀的感觉，有些图形其实只是需要简单的放上看而已。

调用插件 ：

import {pie} from '@/uni_modules/mushan-pie/components/mushan-pie/mushan-pie.vue';

页面调用插件：

number_value 百分比数值

PieStyle 是插件自定义参数

PieStyle:{

circular: '200upx', // 当前圆的大小

animite : false, // 是否要有动画效果

ring :0, // 中间是空心的宽度，0是不显示，0.5是半圆大小

color : '', // 自定义饼图的颜色,

number :false, // 是否要显示圆中间的百分比数字

numbersize:'32upx', // 文字大小默认是12px

rotate : 0, // 是否需要旋转图形

},