给一个demo示例，在vue3+vite小程序中，使用Chart.js插件， 用pnpm install Chart.js的方式使用，vue页面中<script setup lang="ts"></script>

以下是一个在 Vue 3 + Vite 中使用 Chart.js 插件的示例，使用 pnpm 进行安装：

1. 首先，在终端中进入 Vue 3 + Vite 项目的根目录。

2. 执行以下命令安装 Chart.js：

pnpm install chart.js

3. 在 Vue 页面中，使用 `<script setup>` 标签来导入和使用 Chart.js：

<template>
  <div>
    <canvas ref="chartCanvas"></canvas>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Chart } from 'chart.js';

// 在这里定义你的图表数据和选项
const chartData = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)',
      ],
      borderWidth: 1,
    },
  ],
};

export default {
  setup() {
    const chartCanvas = ref(null);

    onMounted(() => {
      const ctx = chartCanvas.value.getContext('2d');
      new Chart(ctx, {
        type: 'bar', // 设置图表类型
        data: chartData, // 设置图表数据
        options: {
          responsive: true,
          scales: {
            y: {
              beginAtZero: true,
            },
          },
        },
      });
    });

    return {
      chartCanvas,
    };
  },
};
</script>

这是一个简单的示例，创建了一个柱状图，并使用 Chart.js 的功能进行配置和渲染。您可以根据自己的需求自定义图表数据和选项。

注意：在使用前，请确保已经正确安装 pnpm，并且已经创建了 Vue 3 + Vite 项目。

希望这个示例对您有所帮助！如有任何其他问题，请随时提问。