ฉันใช้ echars มาเป็นเวลานาน หากแผนภูมิวงกลมที่มีรูปแบบที่แสดงด้านบนปรากฏขึ้น แสดงว่าเป็นเรื่องยากสำหรับฉันที่จะใช้ echarts ในเอกสารอย่างเป็นทางการ ฉันลองใช้ d3 และ canvas เพื่อวาดแผนภูมิวงกลมตามลำดับ เนื่องจากฉันคุ้นเคยกับ Canvas และ d3 จำเป็นต้องแนะนำปลั๊กอินด้วย ฉันจึงใช้การห่อหุ้มแคนวาสตามหลักการของน้ำหนักเบา
มีโหมดแผนภูมิวงกลมอย่างเป็นทางการสองโหมด: (1) โหมดรัศมี (2) โหมดพื้นที่
กระบวนการดำเนินการ(1) ฟังก์ชันแบบห่อหุ้มมีดังนี้:
ฟังก์ชั่น DrawCircle(canvasId, option) { const color_arr = option.color la data_arr = option.data const pi2 = Math.PI * 2; la canvas = document.getElementById(canvasId); ให้ c = canvas.getContext(2d); startAgl = 0; ให้ agl; ให้ผลรวม = 0; canvas.height; for (ให้รายการของ data_arr) { sum += item.value * 1.0 } data_arr = data_arr.map((v, i) => { return { ชื่อ: v.name, value: (v.value) * 1.0 / sum } }) สำหรับ (let i = 0; i < data_arr.length; i++) { //วาดแผนภูมิวงกลม ให้ min = (cW > cH ? cH : cW); //รับค่าต่ำสุดของความกว้างและความสูงของผืนผ้าใบ agl = data_arr[i].value * pi2 + startAgl; //End point c. strokeStyle = color_arr[i]; * min * 0.3; // ความหนาของเส้น c.beginPath(); c.arc(cW / 2, cH / 2, min * 0.3, startAgl, agl, false); // วาดวงกลม c.fillRect (cW * 0.8, 50 + 18 * i, 16, 16); c.fillText(data_arr[i].name, cW * 0.8 + 20, 62 + 18 * ฉัน);(2) วิธีการโทร:
ให้สี = ['#0580F2', '#FAA732', '#E1575D', '#8B73CC', '#8CD123', '#4B53BA', '#429588']; [ { ชื่อ: '20' ค่า: '20' }, { ชื่อ: '30' ค่า: '30' }, { ชื่อ: '40', ค่า: '40' }, { ชื่อ: '50', ค่า: '50' }, { ชื่อ: '60', ค่า: '60' }, ] } DrawCircle('myCanvas', option )ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network