J'utilise les echars depuis longtemps. Si un diagramme circulaire avec le style indiqué ci-dessus apparaît, il m'est difficile d'utiliser les echarts. Le document officiel n'a pas de diagramme circulaire dans ce mode. J'ai essayé d'utiliser d3 et Canvas pour dessiner respectivement des diagrammes circulaires. Parce que je suis familier avec Canvas et que D3 doit également introduire des plug-ins, basés sur le principe de la légèreté, j'ai utilisé l'encapsulation Canvas.
Il existe deux modes de diagramme circulaire officiels : (1) Mode Rayon (2) Mode Zone
Processus de mise en œuvre(1) Les fonctions encapsulées sont les suivantes :
function drawCircle(canvasId, option) { const color_arr = option.color let data_arr = option.data const pi2 = Math.PI * 2; let canvas = document.getElementById(canvasId); startAgl = 0; let agl; let sum = 0; const cW = toile.width; canvas.height; for (laisser l'élément de data_arr) { sum += item.value * 1.0 } data_arr = data_arr.map((v, i) => { return { nom : v.name, valeur : (v.value) * 1.0 / sum } }) for (let i = 0; i < data_arr.length; i++) { //Dessinez un diagramme circulaire let min = (cW > cH ? cH : cW); //Obtenir la valeur minimale de la largeur et de la hauteur du canevas agl = data_arr[i].value * pi2 + startAgl; //Point final c.strokeStyle = color_arr[i]; * min * 0,3; // Épaisseur de ligne c.beginPath(); c.arc(cW / 2, cH / 2, min * 0,3, startAgl, agl, false); //Dessine un cercle c.stroke(); c.closePath(); startAgl = agl; //Dessine une légende c.fillStyle = c.fillRect(cW * 0.8, 50 + 18 * i, 16, 16); c.fillText(data_arr[i].name, cW * 0,8 + 20, 62 + 18 *je); } }(2) Méthode d'appel :
let color = ['#0580F2', '#FAA732', '#E1575D', '#8B73CC', '#8CD123', '#4B53BA', '#429588'] ; [ { nom : '20', valeur : '20' }, { nom : '30', valeur : '30' }, { nom : '40', valeur : '40' }, { nom : '50', valeur : '50' }, { nom : '60', valeur : '60' }, ] } drawCircle('myCanvas', option )Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.