携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情
本次系列文章参与八月的更文活动，记录一个微信小程序从零到有的开发过程。本文为本系列第十九篇：使用FundCharts绘制饼状图
本项目涉及生成学生学习过程产生的周报页面，需要绘制饼状图。
方案选择
考虑到不造轮子且尽可能引入轻量级组件库，于是选用了FundCharts这一组组件库，对于有canvas开发经验的人来说，也更方便的通过对实例的二次绘制从而实现定制化开发。
FundCharts简介
FundCharts是一款轻量级canvas数据可视化组件库，可以在小程序端/web端或服务端node.js运行。可以绘制折线图，饼状图，柱状图等等。
特性：重图形，轻量级，兼容好
需求简述：
绘制一环形饼状图，当右侧选择对应的区域快时，左侧的饼状图需要旋转到左侧中间位置。
安装
npm install fundcharts --save
初始化绘制图形
在相应页面引入饼状图
import { pie } from 'fundcharts'
初始化
<canvas canvas-id="chart" style="width: 130px;"></canvas>
onLoad () {
const PieChart = pie;
chart = new PieChart({
id: 'chart',
datas: data,
colors: [
"#4a89fe",
"#21beff",
"#21ffd8",
"#ffe221",
"#ffc321",
"#fcaa0b",
"#ff6263",
"#f84678",
], //饼状图各区域颜色(六位十六进制)
radius:50,//饼图直径，默认取画布高度height/20 - 20
origin:{x:55,y:70}, //圆心坐标{x: 水平坐标, y: 垂直坐标}
hoverRate:1.2 //交互高亮区域半径
});
chart.init();
}
业务功能：旋转角度
FundCharts提供了一个可以配置起始角度的参数，因此只需要在右侧选择到对应区块时，改变饼状图的起始角度即可。可以使用FundCharts提供的update参数。具体业务逻辑不详述。
chart.update({
widthRates: temp, //设置对应区块半径扩大
startAngle:-((90-this.data.rotateDeg)/180)* Math.PI //修改旋转角度
})
遇到的坑
在真机调试的时候，发现了bug：canvas元素悬浮，不随父组件滚动。
经上网查找，发现时自己的最外层标签加了overflow的属性。去掉即可。
还有其他情况也会产生此bug，具体可参考文章
