制作一个vue饼状图绘制组件

901 阅读1分钟

在前端开发中,经常会遇到绘制图表的问题,比如对学生的成绩进行扇形饼状图的绘制。

使用的框架为vue,使用v-for将学生的信息遍历生成,此时就需要一个能够绘制饼状图的组件了。

对于绘制图表,现在前端比较流行的插件有echarts、AntV这一类绘制插件。

echarts

AntV

 当然,有时因为需求较少,只需要绘制简单的饼状图,导入这些插件过于麻烦时可以自己使用canvas进行绘制。

编写一个自定义的饼状图生成组件

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.pie-chart {
				float: right;
				width: 20px;
				height: 20px;
			}
		</style>
		<title>自定义饼状图组件</title>
	</head>
	<body>
		<div id="app">
			<div v-for="(item,index) in dataList" :key='index' style="height: 20px;line-height: 20px;width: 150px;margin-bottom: 20px;" >
				<div style="float: left;" >{{ item.name }}的数据:{{ item.Data }}</div> <piecanvas :datavalue="{num_value: item.Data, ID: item.ID }" ></piecanvas><br>
			</div>	
		</div>

		<!-- 扇形图控件 -->
		<script id="piecanvas" type="text/template">
			<div class="pie-chart">		
		        <canvas :id=" 'myCanvas' + datavalue.ID " :data-getnum="datavalue.num_value" 
		            width="20" height="20">
		            您的浏览器不支持canvas标签
		        </canvas>		
			</div>
		</script>

		<script>
			var pieCanvas = {
				template: "#piecanvas",
				props: ['datavalue'],
				data: function() {
					return { canvas: '' }
				},
				mounted: function() {
					this.canvas = document.getElementById("myCanvas" + this.datavalue.ID);
					this.initPieCanvas(this.datavalue.num_value);
				},
				updated: function() {},
				watch: {
					'datavalue.num_value': function(newval) {
						this.initPieCanvas(newval)
					}
				},
				methods: {
					initPieCanvas: function(num) {
						var self = this;
						var num_value = parseInt(num) * 2 / 100;
						
						if (this.canvas.getContext) {  //有多少份就可以写,最大值2PI
							drawCircle("#00ff00", 0, Math.PI * num_value); 
							drawCircle("#eeeeee", Math.PI * (num_value), Math.PI * (2));
						}
						function drawCircle(color, beginPoint, radian) {
							var ctx = self.canvas.getContext("2d");
							ctx.beginPath();
							ctx.strokeStyle = color;
							var circle = { x: 10, y: 10, r: 5 };
							ctx.arc(circle.x, circle.y, circle.r, beginPoint - Math.PI * 0.5, radian - Math.PI * 0.5, false); // x大小,y大小,开始角度,结束角度,顺时针
							ctx.lineWidth = 10;
							ctx.stroke();
						};
					},
				}
			}		
			var app = new Vue({
				el:'#app',
				data:{
					dataList:[
						{ ID:01, name:'张三', Data: '57%' },
						{ ID:02, name:'李四', Data: '75%' },
						{ ID:03, name:'王五', Data: '25%' },
						{ ID:04, name:'赵六', Data: '100%'},
						{ ID:05, name:'郑七', Data: '87%' },
					]
				},
				components: {
					piecanvas: pieCanvas
				}
			})
		</script>
	</body>
</html>

生成效果:

 

以上就是一个简单的饼状图组件的生成了,其中绘制饼状图时较为核心的方法

if (this.canvas.getContext) {  //有多少份就可以写,最大值2PI
    drawCircle("#00ff00", 0, Math.PI * num_value); 
    drawCircle("#eeeeee", Math.PI * (num_value), Math.PI * (2));
}
function drawCircle(color, beginPoint, radian) {
    var ctx = self.canvas.getContext("2d");
    ctx.beginPath();
    ctx.strokeStyle = color;
    var circle = { x: 10, y: 10, r: 5 };
    ctx.arc(circle.x, circle.y, circle.r, beginPoint - Math.PI * 0.5, radian - Math.PI * 0.5, false); //x大小,y大小,开始角度,结束角度,顺时针
    ctx.lineWidth = 10;
    ctx.stroke();
};

参考博客:blog.csdn.net/qq_38944959…

www.jianshu.com/p/32a87f41b…

一起学习,一起进步 -.- ,如有错误,可以发评论