uni-app 之canvas绘制饼状图

uni-app 之canvas绘制饼状图

一开始，对于canvas我是拒绝的，后来，我发现我爱上了它，像爱上小哥哥一样~~

　　说起canvas，是css3新增的标签。而饼状图又是canvas经典，我们公司现在正在用uni-app框架去研发APP，平常我们使用canvas标签时，只需在HTML中增加一个canvas标签，然后再script中获取标签属性，var canvas = document.getElementById('cavsElem') 就可以了！但是，咱们也说了，使用uni-app，有过了解的人也知道，咱们uni-app是不支持document和window对象的，所以呢uni-app官网给我们提供了一个API --uni.createCanvasContext，他会创建一个画布，你要定义他的宽高，给这个画布一个id，然后你就可以随心多欲了~~~

我们想要的图是这样的：

　　

我之前在调研这个canvas的时候，发现大家都做了那个就是解释说明，我就在延展的地方给大家写出来了，emmmmm，假如我有这么多钱，买了这么多化妆品~~

这个canvas把，我结合一下我当初调研的时候的感觉，就感觉还是给大家直接上代码比较好，解说什么的当时我都看不懂，我就一步一步的跟大家解释一下，让大家拿下他！！！像拿下心仪的小哥哥一样！！！加油，我们是最棒的！！（什么鬼~）

我们是在vue项目中写的 ， 首先我先在一个vue组件中使用了canvas标签：

　　定义canvas的大小宽高，给canvas定义一个id，在获取的时候能用到，我给了一个class样式，就是想让他居中的  ，，可忽略

<canvas style="width: 350px; height: 300px;" canvas-id="homeownerCanvas" class="homeowner-canvas_charts"></canvas>                

　　其次我在js中定义了所需要展示的数据，类型，所占比例的：

　　　　　　　　　　let data = [{
			"money": 30 + '万',
			"value": 0.3,
			"color": "#afb4db",
			"title": "口红"
		},
		{
			"money": 20 + '万',
			"value": 0.2,
			"color": "#ffce7b",
			"title": "眼影"
		},
		{
			"money": 30 + '万',
			"value": 0.3,
			"color": "#f8aba6",
			"title": "粉底"
		},
		{
			"money": 20 + '万',
			"value": 0.2,
			"color": "#afdfe4",
			"title": "眉笔"
		}
		];

　　这个东西我就不详细解释了 ，他这个的意思就是说定义要显示的数据，比如你看到的金钱，颜色（我看别人家的颜色有的是生成的，我就直接定义了颜色，毕竟咱们主题不是他），比值（比值这个问题就是说你自己当前的这个金钱在你所有的金钱中所占的比例，说白了就是1/10 = 0.1的事情），还有他的title？   就是他这个块是什么东西啦~~·

　　然后就是在vue组件中引用关于canvas的js文件，现在vue组件中调用 ：

　　　　　字段说明~参数一： canvasID    参数二：定义好的data     参数三：总数（自己可以计算啦~我直接写死了）这个是便于以后有别的组件也会使用canvas这个js文件，所以把会使用到的数据当做参数传送过去

　　canvas.canvasGraph('homeownerCanvas',data,100)

　　接下来就是重头戏 ：canvas这个js文件了！！

// 图表封装
export default{
    canvasGraph(canvasID,data,summation){
        function PieChart(ctx,radius){
             //定义起始角度
            let tempAngle=0;
            //定圆心位置
            let x0=182,y0=150