Eu uso echars há muito tempo. Se aparecer um gráfico de pizza com o estilo mostrado acima, será difícil para mim usar echarts. O documento oficial não possui um gráfico de pizza neste modo. Tentei usar d3 e canvas para desenhar gráficos de pizza respectivamente. Como estou familiarizado com canvas e d3 também precisa introduzir plug-ins, com base no princípio da leveza, usei encapsulamento de canvas.
Existem dois modos oficiais de gráfico de pizza: (1) Modo Raio (2) Modo Área
Processo de implementação(1) As funções encapsuladas são as seguintes:
função drawCircle (canvasId, opção) { const color_arr = option.color let data_arr = option.data const pi2 = Math.PI * 2; startAgl = 0; deixe agl; deixe const cW = canvas.width; canvas.height; for (deixe o item de data_arr) { sum += item.value * 1.0 } data_arr = data_arr.map((v, i) => { return { nome: v.name, valor: (v.value) * 1.0 / sum } }) for (let i = 0; i < data_arr.length; i++) { //Desenhe um gráfico de pizza let min = (cW > cH ? cH : cW); //Obter o valor mínimo da largura e altura da tela agl = data_arr[i].value * pi2 + startAgl; //Ponto final c.strokeStyle = color_arr[i]; * min * 0,3; // Espessura da linha c.beginPath(); startAgl, agl, false); //Desenhe um círculo c.stroke(); c.closePath(); 50 + 18 * i, 16, 16); c.fillText(data_arr[i].nome, cW * 0,8 + 20, 62 + 18 *i);(2) Método de chamada:
let color = ['#0580F2', '#FAA732', '#E1575D', '#8B73CC', '#8CD123', '#4B53BA', '#429588']; [{nome: '20', valor: '20' }, { nome: '30', valor: '30' }, { nome: '40', valor: '40' }, { nome: '50', valor: '50' }, { nome: '60', valor: '60' }, ] } drawCircle('myCanvas', opção )O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.