Vue Js: Как добавить и использовать линейную диаграмму Google в приложении Vue Js
В этом руководстве вы узнаете, как интегрировать и использовать линейную диаграмму Google в приложениях vuejs.
Это руководство поможет вам шаг за шагом реализовать линейную диаграмму Google для начинающих и экспертов в приложении Vue js. А также сделаем простой пример того, как реализовать линейную диаграмму Google с помощью плагинов Google Chart.
Как добавить и использовать линейную диаграмму Google в приложении Vue Js
Просто выполните следующие шаги и реализуйте линейную диаграмму Google в приложении vue Js с помощью плагина Google Chart:
Шаг 1. Создайте новое приложение Vue Js
На этом шаге откройте свой терминал и выполните следующую команду, чтобы создать новое приложение vue js:
vue create chart-app
Шаг 2 - Установите пакет Google Chart
На этом шаге откройте терминал и выполните следующую команду, чтобы установить пакет диаграммы Google в приложение vue js:
cd chart-app npm i vue-google-charts
Шаг 3 - Добавьте к компонентам в Main.js
На этом этапе посетите каталог /src и откройте файл main.js. Затем импортируйте компоненты в main.js:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Шаг 4 - Добавьте компонент в App.vue
На этом этапе посетите каталог /src/ и файл App.vue. А затем добавьте в него следующий код:
<template>
<div id="app" style="width:70%;">
<h1 style="padding-left:80px;">Vue Js Google line Charts Example</h1>
<GChart
type="LineChart"
:data="chartData"
:options="chartOptions"
/>
</div>
</template>
<script>
import { GChart } from "vue-google-charts";
export default {
name: "App",
components: {
GChart
},
data() {
return {
// Array will be automatically processed with visualization.arrayToDataTable function
chartdаta: [
["Year", "Sales", "Expenses", "Profit"],
["2017", 1030, 540, 350],
["2018", 1000, 400, 200],
["2019", 1170, 460, 250],
["2020", 660, 1120, 300],
],
chartOptions: {
chart: {
title: "Company Performance",
subtitle: "Sales, Expenses, and Profit: 2017-2020"
}
}
};
}
};
</script>
В этом руководстве вы узнали, как использовать линейную диаграмму Google в приложении vuejs.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.