Создание круговой диаграммы SVG с помощью Vue.js

Создайте с помощью пары строк кода свою полностью настроенную круговую диаграмму, а не импортируйте библиотеку 80 КБ.

Vue.js

Vue - это простой и минимальный прогрессивный фреймворк Javascript. Это такая легкая библиотека (20 КБ минимизирована и сжата) по сравнению с Angular 2 и ReactJS.

Имея промежуточное понимание HTML, CSS и JS, вы можете приступить к работе с Vue.

Vue-cli

Инструмент с нулевой конфигурацией для быстрого запуска вашего приложения Vue.

npm i -g vue-cli

vue init webpack-simple our-pie-chart

Мы выберем шаблон webpack-simple, так как он имеет однофайловые компоненты и простые конфигурации веб-пакетов, поэтому рассуждать о нем будет проще, чем о шаблоне webpack.

Вы можете ознакомиться с другими доступными шаблонами здесь.

Мы сменим каталог на нашу папку «our-pie-chart», затем выполним «npm i», чтобы установить зависимости, затем запустите проект, выполнив «npm run dev».

Вот что вы должны увидеть после выполнения «npm run dev».

Структура проекта:

Давайте подробнее рассмотрим, что у нас внутри папки проекта.

Точка входа в проект (main.js):

App.vue:

Давайте удалим некоторые вещи, которые нам не нужны, и импортируем PieChart, компонент, который мы собираемся создать.

Я предполагаю, что вы знакомы с фигурами SVG и приемами штрих-тире. Если это не так, вы можете проверить ссылку ниже для получения дополнительной информации о SVG shape и stroke-dasharray и stroke-dashoffset

Как работает линейная анимация SVG | CSS-Tricks
Бьюсь об заклад, все вы видели эту маленькую уловку, когда путь SVG анимируется, чтобы выглядеть так, как будто он сам рисует. Это супер… css-tricks.com