Краткое руководство по использованию ECHARTS и VUE-ECHARTS
Сердце каждого приложения отображают данные для пользователей. Иногда очень сложно отображать эти данные с использованием текста. Диаграммы и графики – отличный способ обеспечить визуальное представление этих данных. В этой статье я покажу вам, насколько легко создавать визуально привлекательные графики в вашем приложении Vue.js.
Начиная
Я буду использовать Vue CLI, чтобы быстро лечить приложение стартера. Я буду использовать как Echarts, так и Vue-Echarts, чтобы добавить диаграммы на наше приложение стартера. Так что давайте начнем.
Установите Vue CLI с помощью этой команды:
npm install @vue/cli
Далее мы будем использовать Vue CLI, чтобы лечить приложение VUE, которое мы будем использовать. Мы создадим приложение, используя эту команду:
vue create vue-echarts-demo
Vue CLI спросит вас, хотите ли вы использовать предустановку по умолчанию или вручную выбирать функции. Выберите по умолчанию Отказ
Это создаст наше приложение в папке под названием VUE-ECHARTS-DEMO Отказ Измените в этот каталог с помощью этой команды:
cd vue-echarts-demo
Установка пакетов диаграммы
Эхартс является одним из крупнейших и наиболее широко используемых программ графиков. Мы будем использовать это в нашем VUE-приложении. Чтобы он использовал его в Vue, мы также будем использовать продукт под названием Vue-Echarts Отказ Vue-Echarts – это обертка для Echarts, чтобы позволить ему работать в среде Vue.
Вы можете установить их как с помощью этой команды:
npm install echarts vue-echarts
Настройка пакетов диаграммы
Теперь, когда у нас установлены пакеты диаграммы, нам нужно установить их в нашем приложении. Откройте SRC каталог и создать новый каталог под названием плагины . Внутри новых плагинов каталог Создайте файл под названием Echarts.js Отказ
Мы создадим Vue Component для Echarts в этом файле. Компонент будет в глобальном масштабе в нашем приложении. Шаги, которые нам нужно предпринять, – это импортировать как Vue, так и Vue-Echarts. Далее мы импортируем части Echarts, которые мы будем использовать. Наш первый график будет гистограммой, поэтому нам нужно будет импортировать это тоже. Наконец, мы создаем глобальный компонент под названием Диаграмма Отказ Вот как должен выглядеть ваш файл Echarts.js:
import Vue from 'vue';
import Echarts from 'vue-echarts';
import 'echarts/lib/chart/bar';
Vue.component('chart', Echarts);Импорт нашего файла плагина
Мы должны сделать Vue в курсе файла, который мы только что создали. Мы делаем это, импортируя его в main.js файл. Откройте файл Main.js и добавьте следующую строку после последнего оператора Import:
import "@/plugins/echarts";
Теперь мы готовы создать наш первый график.
Создание гистограммы
Мы будем создавать все наши графики в компоненте HellowOrld. Этот компонент был создан автоматически, когда мы использовали Vue CLI для создания нашего приложения.
Откройте файл Helloworld.vue.vue. и сделать следующее:
- Удалить все HTML внутри тегов шаблона
- Удалить реквизиты в тегах сценария
- Удалить все CSS в тегах стиля
Ваш файл должен выглядеть так:
В нашем плагине мы позвонили нашему компоненту Диаграмма Отказ Vue-Echarts создает диаграммы, используя данные, которые вы передаете в нее, используя rop под названием Варианты Отказ Давайте использовать это, чтобы создать HTML для нашего первого графика. Добавьте следующий код в теги шаблона:
Определение нашего диаграммы
Далее нам нужно определить данные, которые будут использоваться для создания нашей таблицы. Внутри меток сценария Создайте новый объект данных с записью для ChartOptionsBar. Ваш тег скрипта должен выглядеть так:
Создание диаграмм данных
Наша первая гистограмма будет содержать ежеквартальные данные продаж для вымышленной компании. Каждый квартал будет отображаться на оси X графика. Сумма продаж будет отображаться на оси Y графиков.
Давайте определим наш Xaxis первым. Мы предоставим массив данных, который будет содержать записи за каждый квартал года. Добавьте следующее на наш ChartOptionsbar объект:
chartOptionsBar: {
xAxis: {
data: ['Q1', 'Q2', 'Q3', 'Q4']
}
}Наша Yaxis будет отображать значение продаж только для каждого квартала. По этой причине нам не нужно создавать для него массив данных. Вместо этого мы говорим, что он будет отображать ценить . Добавьте следующее на наш объект ChartOptionbar:
chartOptionsBar: {
xAxis: {
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
}
}Последний шаг состоит в том, чтобы предоставить данные, которые будут отображаться в нашей панели гистограммы. Вы делаете это, добавив серию массива. Серия – это массив объектов. Каждый объект определяет тип диаграммы, который будет создан, и будет создан массив данных значений, которые будут нанесены на графике. Вы можете добавить его с этим:
chartOptionsBar: {
xAxis: {
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: [63, 75, 24, 92]
}
]
}Вы можете начать свой сервер с помощью команды:
npm run serve
Затем откройте браузер к Localhost: 8080, и вы увидите свой первый график, который выглядит так:
Добавление стайлинга на наши графики
По умолчанию Vue-Echarts устанавливает ширину 600 пикселей для диаграммы. Я бы предпочел, чтобы наши графики были полной шириной своего контейнера. Для этого я собираюсь разместить диаграмму внутри Div. Я дам это девочку класса график-обертка Отказ Мой шаблон теперь выглядит так:
Далее я хочу добавить немного стайлинга на новый график-обертка класс. Я сделаю этот класс иметь ширину, равную размер экрана и иметь высоту 700 пикселей. Вот стиль, который я добавил:
.chart-wrapper {
width: 100%;
height: 700px;
}Vue-Echarts добавляет класс под названием Эхартс на все его графики. Мы также будем стирать, что в наших CSS. Мы скажем этот класс, чтобы занять 100% от высоты и ширины своего контейнера, который является график-обертка Отказ Вот CSS, которые я добавил:
.echarts {
width: 100%;
height: 100%;
}Хотя мы добавляем стили, которые я хочу заменить Vue logo на заголовок. Откройте файл app.vue. Удалите тег и замените его с помощью:
Vue eCharts Demo
Теперь наша график выглядит так:
Добавление заголовка и цвета
Это отличное начало для нашего первого графика. Когда люди рассматривают график, они не уверены, что они просмотра. Мы можем решить эту дилемму, добавив название на наш график.
Каждый компонент ECHARTS, которые вы хотите использовать, должен быть импортирован. Название – это компонент, поэтому нам нужно импортировать его. Откройте файл ECHARTS.JS и добавьте следующую строку:
import 'echarts/lib/component/title';
Далее мы можем добавить заголовок на нашу гистограмму. Вернуться в HellowOrld.Vue Component Давайте добавим название нашего ChartOptionsbar объект.
chartOptionsBar: {
xAxis: {
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: [63, 75, 24, 92]
}
],
title: {
text: 'Quarterly Sales Results'
}
}ECHARTS по умолчанию помещает заголовок на левой части гистограммы. Вот что наша график выглядит сейчас:
Мне не нравится, как этот титул выглядит так, давайте изменим это. Я хочу название, чтобы иметь больший размер шрифта и быть центрированным. Участок имеет опцию под названием х который представляет горизонтальную плоскость. Я хочу название по центру этого. Чтобы затусовать на название иметь больший размер шрифта, нам нужно добавить TextStyle Отказ Последнее изменение, которое я хочу сделать, – это установить брус другой цвет. Вот какие мои варианты выглядят так:
chartOptionsBar: {
xAxis: {
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: [63, 75, 24, 92]
}
],
title: {
text: 'Quarterly Sales Results',
x: 'center',
textStyle: {
fontSize: 24
}
},
color: ['#127ac2']
}Вот окончательная версия моей гистограммы:
Создание диаграммы линии
Далее я покажу вам, как создать диаграмму линии. Мы создадим диаграмму линии, показывающую ежемесячные цены на акции для вымышленной компании. Так что давайте начнем.
Во-первых, нам нужно создать новую Div Chartper Div и новый элемент диаграммы. Новый элемент диаграммы получит свои варианты от ChartOptionsline объект. Вот что выглядит мой HTML-код:
Далее в нашем объекте данных создайте новый объект ChartOptionsline. Вместо создания нового объекта скопируйте существующие объект ChartoptionSbar. Переименуйте копию на ChartOptionsline. . Сейчас нам нужно только изменить только тип в серии из бара до линии. Вот что наше ChartOptionsline Объект выглядит как:
chartOptionsLine: {
xAxis: {
data: ["Q1", "Q2", "Q3", "Q4"]
},
yAxis: {
type: "value"
},
series: [
{
type: "line",
data: [63, 75, 24, 92]
}
],
title: {
text: "Quarterly Sales Results",
x: "center",
textStyle: {
fontSize: 24
}
},
color: ["#127ac2"]
}Если вы перейдете в свой браузер, вы заметите, что диаграмма линии не отображается. Это потому, что нам нужно импортировать его в наш плагин, поскольку мы сделали с гистограммой.
Откройте ECHARTS.JS и добавьте следующую строку:
import 'echarts/lib/chart/line';
Теперь у нас есть этот линейный график:
Изменить название и данные
Мы хотим линейную диаграмму отображать ежемесячные цены на акции для вымышленной компании. Нам понадобится более четырех точек данных. У нас будет 12 точек данных для нашего линейного графа. Мы также хотим, чтобы название отображалось на оси X, чтобы быть месяцами года вместо кварталов. Нам также нужно изменить название нашего графика.
Мы можем обновить наши ChartOptionsline с этими значениями:
chartOptionsLine: {
xAxis: {
data: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
},
yAxis: {
type: "value"
},
series: [
{
type: "line",
data: [55, 72, 84, 48, 59, 62, 87, 75, 94, 101, 127, 118]
}
],
title: {
text: "Monthly Stock Prices",
x: "center",
textStyle: {
fontSize: 24
}
},
color: ["#127ac2"]
}Теперь наша диаграмма линии выглядит так:
Доступ к документации по графикам
ECHARTS предоставляет многочисленные типы диаграмм, кроме бар и строки. Echarts предоставляет множество вариантов, которые вы можете добавить в свою таблицу. Вы можете добавить легенды или подсказки, например.
Если вы хотите узнать о других типах и параметрах диаграмм, которые доступны, вы можете прочитать их документацию. Вот a Ссылка на документацию Отказ
Получить код
Весь код для этой статьи может быть найдено в моем счете Github Отказ
Заключение
Очень легко добавить пользовательские графики и графики на приложение Vue.js, используя eCharts и vue-echarts. Диаграммы предоставляют способ визуализации данных для пользователей для просмотра.
Если у вас есть какие-либо отзывы, пожалуйста, оставьте комментарий ниже. Пожалуйста, хлопайте для этой статьи. Спасибо за прочтение.
Оригинал: “https://www.freecodecamp.org/news/how-to-add-charts-and-graphs-to-a-vue-js-application-29f943a45d09/”