Googlechart
1.1 Installieren Sie vue-google-charts
$npm install vue-google-charts--save
1.3 Globaler Import im Wesentlichen
import VueGoogleCharts from 'vue-google-charts'
const app = createApp(App)
app.use(VueGoogleCharts)
app.mount('#app')
1.4 Wird in Komponenten verwendet
<template>
<div style="width:600px;">
<GChart
type="ColumnChart"
:data="chartData"
:options="chartOptions"
></GChart>
</div>
</template>
<script >
import { GChart } from 'vue-google-charts'
export default{
components:{
GChart
},
data(){
return{
chartData: [//图表数据
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
],
chartOptions: {//图表属性
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
}
}
}
}
</script>
type="ColumnChart" gibt an, dass das Diagramm ein Histogramm ist