Я использую echars в течение длительного времени. Если появляется круговая диаграмма с показанным выше стилем, мне сложно использовать echars. В официальном документе нет круговой диаграммы в этом режиме. Я попробовал использовать d3 и холст для рисования круговых диаграмм соответственно. Поскольку я знаком с холстом, а в d3 также необходимо ввести плагины, основанные на принципе облегчения, я использовал инкапсуляцию холста.
Существует два официальных режима круговой диаграммы: (1) режим радиуса (2) режим площади.
Процесс реализации(1) Инкапсулированные функции следующие:
функция drawCircle(canvasId, option) { 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; пусть сумма = 0; const cW = Canvas.width; 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++) { //Рисуем круговую диаграмму let min = (cW > cH ? cH : cW); //Получаем минимальное значение ширины и высоты холста agl = data_arr[i].value * pi2 + startAgl //Конечная точка c.strokeStyle = color_arr[i]; c.lineWidth = data_arr[i].value; * min * 0.3; // Толщина линии c.beginPath(); c.arc(cW/2, ch/2, min * 0.3, startAgl, agl, false); //Рисуем круг c.stroke(); startAgl = agl; //Рисуем легенду c.fillStyle = color_arr[i]; c.fillRect(cW * 0.8, 50 + 18 * i, 16, 16); c.fillText(data_arr[i].name, cW * 0.8 + 20, 62 + 18 * я); } }(2) Метод вызова:
let color = ['#0580F2', '#FAA732', '#E1575D', '#8B73CC', '#8CD123', '#4B53BA', '#429588'] let option = { color: color, data: [ {имя: '20', значение: '20' }, { имя: '30', значение: '30' }, { имя: '40', значение: '40' }, { имя: '50', значение: '50' }, { имя: '60', значение: '60' }, ] } drawCircle('myCanvas', option )Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.