Vue3中使用Googlechart

最新推荐文章于 2025-01-12 10:36:25 发布

乘风Vico

最新推荐文章于 2025-01-12 10:36:25 发布

阅读量405

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/gcf10080353/article/details/131717324

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文演示了如何在Vue项目中安装和使用vue-google-charts库来创建柱状图。首先通过npm安装，然后在main.js中全局引入，接着在组件中定义数据和选项，展示了一个展示公司业绩的ColumnChart。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Googlechart

1.1 安装vue-google-charts

$npm install vue-google-charts--save

1.3 main中全局导入

import VueGoogleCharts from 'vue-google-charts'

const app = createApp(App)

app.use(VueGoogleCharts)

app.mount('#app')

1.4 组件中使用

<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"指定图表为柱状图