He estado usando echarts durante mucho tiempo. Si aparece un gráfico circular con el estilo que se muestra arriba, es difícil para mí usar echarts. El documento oficial no tiene un gráfico circular en este modo. Intenté usar d3 y canvas para dibujar gráficos circulares respectivamente. Como estoy familiarizado con canvas y d3 también necesita introducir complementos, según el principio de peso ligero, utilicé la encapsulación de canvas.
Hay dos modos oficiales de gráfico circular: (1) modo Radio (2) modo Área
Proceso de implementación(1) Las funciones encapsuladas son las siguientes:
función drawCircle(canvasId, opción) { const color_arr = option.color let data_arr = option.data const pi2 = Math.PI * 2; let canvas = document.getElementById(canvasId) let c = canvas.getContext(2d); startAgl = 0; let agl; let suma = 0; const cW = lienzo.ancho; canvas.height; for (let item of data_arr) { suma += item.value * 1.0 } data_arr = data_arr.map((v, i) => { return { nombre: v.name, valor: (v.value) * 1.0 / suma } }) for (let i = 0; i < data_arr.length; i++) { //Dibujar un gráfico circular let min = (cW > cH ? cH : cW); //Obtener el valor mínimo del ancho y alto del lienzo agl = data_arr[i].value * pi2 + startAgl; //Punto final c.strokeStyle = color_arr[i]; * min * 0.3; // Grosor de la línea c.beginPath(); c.arc(cW / 2, cH / 2, min * 0.3, startAgl, agl, false); //Dibujar un círculo c.stroke(); c.closePath(); startAgl = agl; //Dibujar una leyenda c.fillStyle = color_arr[i]; 50 + 18 * i, 16, 16); c.fillText(data_arr[i].nombre, cW * 0.8 + 20, 62 + 18 * i);(2) Método de llamada:
let color = ['#0580F2', '#FAA732', '#E1575D', '#8B73CC', '#8CD123', '#4B53BA', '#429588']; [ { nombre: '20', valor: '20' }, { nombre: '30', valor: '30' }, { nombre: '40', valor: '40' }, { nombre: '50', valor: '50' }, { nombre: '60', valor: '60' }, ] } drawCircle('myCanvas', opción )Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.