In the front-end development, we often encounter the problem of drawing charts, such as drawing a pie chart of students' grades.
The framework used is vue, and v-for is used to traverse students' information. At this time, a component that can draw a pie chart is needed.
For drawing charts, the more popular front-end plug-ins include echarts, AntV and other drawing plug-ins.
echarts
AntV
Of course, sometimes because there is less demand, you only need to draw a simple pie chart. When importing these plug-ins is too troublesome, you can use canvas to draw by yourself.
Write a custom pie chart generation component
code show as below:
<!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>
Generate effect:
The above is the generation of a simple pie chart component, in which the core method of drawing a pie chart
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();
};Reference blog: https://blog.csdn.net/qq_38944959/article/details/88321304
https://www.jianshu.com/p/32a87f41be46
Learn together, make progress together -.-, if you make a mistake, you can post a comment