Saya sudah lama menggunakan echars. Jika diagram lingkaran dengan gaya seperti di atas muncul, sulit bagi saya untuk menggunakan echars. Dokumen resmi tidak memiliki diagram lingkaran dalam mode ini. Saya mencoba menggunakan d3 dan kanvas untuk menggambar diagram lingkaran masing-masing. Karena saya familiar dengan kanvas dan d3 juga perlu memperkenalkan plug-in, berdasarkan prinsip ringan, saya menggunakan enkapsulasi kanvas.
Ada dua mode diagram lingkaran resmi: (1) Mode radius (2) Mode area
Proses implementasi(1) Fungsi yang dienkapsulasi adalah sebagai berikut:
fungsi drawCircle(canvasId, opsi) { const color_arr = option.color let data_arr = option.data const pi2 = Math.PI * 2; biarkan canvas = document.getElementById(canvasId); startAgl = 0; misalkan agl; misalkan jumlah = 0; const cW = kanvas.width; kanvas.tinggi; untuk (biarkan item data_arr) { jumlah += item.nilai * 1.0 } data_arr = data_arr.map((v, i) => { return { nama: v.nama, nilai: (v.nilai) * 1.0 / sum } }) for (misalkan i = 0; i < data_arr.length; i++) { //Gambarlah diagram lingkaran let min = (cW > cH ? cH : cW); //Dapatkan nilai minimum lebar dan tinggi kanvas agl = data_arr[i].value * pi2 + startAgl; //Titik akhir c.strokeStyle = color_arr[i]; * min * 0.3; // Ketebalan garis c.beginPath(); c.arc(cW / 2, cH / 2, min * 0.3, startAgl, agl, false); //Gambarlah sebuah lingkaran c.stroke(); c.closePath(); c.fillRect(cW * 0.8, 50 + 18 * i, 16, 16); c.fillText(data_arr[i].nama, cW * 0,8 + 20, 62 + 18 * saya);
(2) Metode panggilan:
biarkan warna = ['#0580F2', '#FAA732', '#E1575D', '#8B73CC', '#8CD123', '#4B53BA', '#429588']; [ { nama: '20', nilai: '20' }, { nama: '30', nilai: '30' }, { nama: '40', nilai: '40' }, { nama: '50', nilai: '50' }, { nama: '60', nilai: '60' }, ] } drawCircle('kanvasku', pilihan )
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.