Как да интегрираме ApexCharts с Vue.js - подробно ръководство

Диаграмите и графиките са чудесен начин за показване на информация / данни на потребителите на вашето приложение. В тази статия ще ви покажа как точно да направите това с vue-apexcharts.

Приготвяме се да започнем

Използвайки Vue CLI, ние лесно можем да създадем начално приложение. Първо, трябва да инсталираме Vue CLI с командата по-долу. Можете да пропуснете това, ако вече сте го инсталирали.

Забележка: За да използвате CLI, ще трябва да имате инсталиран Node.js версия 8 или по-нова (препоръчва се 8.10.0+).

За да инсталирате CLI, изпълнете тази команда във вашия терминал:

npm install @vue/cli

Сега можем да го използваме, за да създадем нашия проект. Ще създадем проекта с помощта на тази команда:

vue create vue-apexcharts-demo

След това ще бъдем подканени с опцията да изберем предварително зададена по подразбиране или да изберем ръчно функции. Изберете default.

Ще бъде създадена нова директория на проекта и можете да навигирате в нея, като използвате тази команда:

cd vue-apexcharts-demo

Инсталиране на Apexcharts

Преди да продължим, може би се чудите ...

Какво е apexcharts ?!

ApexCharts е модерна библиотека за диаграми, която помага на разработчиците да създават красиви и интерактивни визуализации за уеб страници. Можете да видите демонстрацията им тук.

Ние можем лесно да използваме ApexCharts с нашето Vue приложение, като интегрираме неговия компонент на обвивка за Vue, наречен vue-apexcharts .

За да инсталирате компонента vue-apexcharts в нашето приложение, използвайте тази команда:

npm install --save apexcharts npm install --save vue-apexcharts

Конфигуриране на vue-apexcharts

Сега, след като сме инсталирали vue-apexcharts, трябва да го инсталираме в нашето приложение. Отворете srcдиректорията и създайте нова директория, наречена plugins. Вътре в новата директория за приставки създайте файл с име apexcharts.js.

След това ще създадем Vue компонент за апекчарти в нашата apexcharts.js. Това ще направи компонента глобално достъпен в нашето приложение.

За целта ще импортираме Vue и vue-apexcharts. След това ще създадем глобален компонент, наречен apexchart. Ето как apexcharts.jsтрябва да изглежда вашият файл:

import Vue from 'vue' import VueApexCharts from 'vue-apexcharts' Vue.component('apexchart', VueApexCharts)

Импортиране на нашия плъгин файл

Трябва да информираме Vue за файла, който току-що създадохме. За целта го импортираме във main.jsфайла. Отворете файла main.js и добавете следния ред след последния оператор за импортиране:

import '@/plugins/apexcharts'

Сега сме готови да създадем първата си диаграма.

Създаване на нашата първа диаграма

Ще създаваме нашите диаграми в компонента HelloWorld. Този компонент е създаден автоматично, когато използваме Vue CLI за създаване на нашето приложение.

Отворете файла HelloWorld.vueи изтрийте целия демо код там.

Вашият файл трябва да изглежда така:

   export default { name: 'HelloWorld' }   

Не забравяйте, че в нашия плъгин ние извикахме нашия компонент apexchart.

Vue-Apexcharts изгражда диаграми, като използва данните, които предавате в него с помощта на реквизит, както се вижда в кода по-долу. Ще го използваме, за да създадем HTML за първата ни диаграма. В първия пример ще започнем с една много барна диаграма.

Както можете да видите в горния шаблон, apexchartкомпонентът съдържа 4 подпори. Сега, нека да преминем към частта от сценария.

 export default { name: 'HelloWorld', data: () => ({ options: { chart: { id: 'vuechart-example' }, xaxis: { categories: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ] } }, series: [{ name: 'series-1', data: [55, 62, 89, 66, 98, 72, 101, 75, 94, 120, 117, 139] }] }) } 

Обяснение на данните от диаграмата

Нашата стълбовидна диаграма съдържа месечни цени на акциите за измислена организация. Имаме 12 точки с данни в нашата диаграма. Всеки месец ще се показва на оста x на диаграмата. Ценообразуването им се показва на оста y на диаграмата.

За да предоставим данните, които ще бъдат показани в нашата диаграма, ще добавим сериен масив. Поредицата е масив от обекти. Всеки обект дефинира вида на диаграмата, която трябва да бъде създадена и ще има масив от данни със стойности, които да бъдат нанесени върху графиката.

Можете да стартирате сървъра си с командата:

npm run serve

Сега отворете браузъра си за localhost: 8080 и ще видите вашата диаграма:

Оформяне на нашите класации

Можем да поставим нашата диаграма в центъра на страницата. За да направя това, ще добавя клас chart-wrapperв нашия div. Също така искам да увелича ширината на диаграмата до 800px. Моят шаблон сега изглежда така:

След това нека добавим малко стил към новия chart-wrapperклас, който ще постави нашата диаграма в центъра на страницата. Ето стила, който добавих:

 div.chart-wrapper { display: flex; align-items: center; justify-content: center } 

While we are adding styles I want to replace the Vue logo with a title. Open up the App.vue file. Delete the tag and replace it with:

Vue Apexcharts Demo

Our charts now looks like this:

Adding a Title and Changing Chart Color

We can add a title to our bar chart to add further context and an explanation of what the chart is all about.

To add a title to our bar chart, go back to your HelloWorld.vue component and add a title to the options object.

options: { chart: { id: 'vuechart-example' }, xaxis: { categories: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ] }, title: { text: 'Monthly Stock Pricing' } }, series: [{ name: 'series-1', data: [55, 62, 89, 66, 98, 72, 101, 75, 94, 120, 117, 139] }]

By default, the title is placed on the left side of the bar chart. Here is what our chart looks like now:

Let’s change the default behaviour by adding our own custom style. I want the title to have a bigger font size and to be centered. The title object has a property called align which represents the horizontal plane. I want the title centered on this. To make the title have a bigger font size we need to add a style option.

Also, we can set the bar chart to have a different color. Here is what options look like now:

options: { chart: { id: 'vuechart-example' }, xaxis: { categories: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ] }, title: { text: 'Monthly Stock Pricing', align: 'center', style: { fontSize: '20px', }, }, colors: ['#00897b'] }, series: [{ name: 'series-1', data: [55, 62, 89, 66, 98, 72, 101, 75, 94, 120, 117, 139] }]

This is what the bar chart looks like now:

Creating a Line Chart

First, we need to create a new chart-wrapper div and a new apexchart element. The new apexchart element will hold props like the previous example. But the interesting thing here is all you need to do is to change the prop type in the template to line.

Here is what my HTML code looks like now:

We now have this line graph:

Apexcharts Documentation

Apexcharts have different charts type you can choose from apart from bar and line. They also have various options that you can add to your chart. You can add legends or markers, and tooltips for example.

If you want to find out about the other chart types and options that are available you can read their documentation here

Repo

You can find the code for this article in my github account.

Conclusion

Charts helps us visualize data and help users view and interact with it. Integrating ApexCharts to your Vue application is just as easy as you have seen above.

Feedback is welcome! And please share this article if you found it helpful.

Thanks for reading!