Ich verwende Echars schon seit langem. Wenn ein Kreisdiagramm mit dem oben gezeigten Stil angezeigt wird, ist es für mich schwierig, Echarts in diesem Modus zu verwenden. Ich habe versucht, mit d3 bzw. Canvas Kreisdiagramme zu zeichnen, da ich mit Canvas vertraut bin und d3 auch Plug-Ins einführen muss, basierend auf dem Prinzip der Leichtgewichtigkeit, habe ich Canvas-Kapselung verwendet.
Es gibt zwei offizielle Kreisdiagrammmodi: (1) Radiusmodus (2) Flächenmodus
Implementierungsprozess(1) Die gekapselten Funktionen lauten wie folgt:
function drawCircle(canvasId, option) { const color_arr = option.color let data_arr = option.data const pi2 = Math.PI * 2; let canvas = document.getElementById(canvasId); let startAgl = 0; let agl; let sum = 0; canvas.height; for (let item of data_arr) { sum += item.value * 1.0 } data_arr = data_arr.map((v, i) => { return { name: v.name, value: (v.value) * 1.0 / sum } }) for (let i = 0; i < data_arr.length; i++) { //Zeichne ein Kreisdiagramm let min = (cW > cH ? cH : cW); //Ermitteln Sie den Mindestwert der Leinwandbreite und -höhe agl = data_arr[i].value * pi2 + startAgl; //Endpunkt c.StrokeStyle = color_arr[i]; * min * 0,3; // Linienstärke c.beginPath(); c.arc(cW / 2, cH / 2, min * 0,3, startAgl, agl, false); 50 + 18 * i, 16, 16); c.fillText(data_arr[i].name, cW * 0.8 + 20, 62 + 18 * i); } }(2) Aufrufmethode:
let color = ['#0580F2', '#FAA732', '#E1575D', '#8B73CC', '#8CD123', '#4B53BA', '#429588']; let option = { color: color, data: [ { Name: '20', Wert: '20' }, { Name: '30', Wert: '30' }, { name: '40', value: '40' }, { name: '50', value: '50' }, { name: '60', value: '60' }, ] } drawCircle('myCanvas', option )Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.