vue3 图表

<template>
  <div>
    <line-chart :chart-data="datacollection" :options="chartOptions"></line-chart>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import LineChart from './LineChart.vue';

export default {
  components: {
    LineChart
  },
  setup() {
    const datacollection = ref(null);
    const chartOptions = ref({
      responsive: true,
      maintainAspectRatio: false
    });

    onMounted(() => {
      datacollection.value = {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 39, 10, 40, 39, 80]
          }
        ]
      };
    });

    return {
      datacollection,
      chartOptions
    };
  }
};
</script>

<style scoped>
/* Add your styles here */
</style>

解释说明：

1. 模板部分 (<template>)：

   • 使用了一个自定义的 <line-chart> 组件，并通过 v-bind（简写为 :）将 chart-data 和 options 传递给该组件。

2. 脚本部分 (<script>)：

   • 导入了 Vue 3 的 Composition API 函数 ref 和 onMounted，以及自定义的 LineChart 组件。
   • 定义了 datacollection 和 chartOptions 两个响应式变量，分别用于存储图表数据和配置选项。
   • 在 onMounted 生命周期钩子中初始化 datacollection 的值，设置图表的标签和数据集。

3. 样式部分 (<style scoped>)：

   • 可以在这里添加特定于该组件的样式。

这个示例展示了如何在 Vue 3 中使用一个简单的折线图组件。你需要确保有一个 LineChart.vue 文件来渲染实际的图表，通常会使用 Chart.js 或其他类似的库来实现。