No desenvolvimento inicial, geralmente encontramos o problema de desenhar gráficos, como desenhar um gráfico de pizza das notas dos alunos.
A estrutura usada é vue e v-for é usado para percorrer as informações dos alunos.Neste momento, um componente que pode desenhar um gráfico de pizza é necessário.
Para desenhar gráficos, os plug-ins front-end mais populares incluem echarts, AntV e outros plug-ins de desenho.
echarts
AntV
Claro, às vezes porque há menos demanda, você só precisa desenhar um gráfico de pizza simples.Quando importar esses plug-ins é muito problemático, você pode usar a tela para desenhar você mesmo.
Escreva um componente de geração de gráfico de pizza personalizado
código mostrado abaixo:
<!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>
Gerar efeito:
O acima é a geração de um componente de gráfico de pizza simples, em que o método principal de desenhar um gráfico de pizza
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 de referência: https://blog.csdn.net/qq_38944959/article/details/88321304
https://www.jianshu.com/p/32a87f41be46
Aprendam juntos, façam progressos juntos -.-, se você cometer um erro, você pode postar um comentário