我尝试使用vue-chartjs，但使用composition API实现它。大多数例子要么是我不熟悉的typescript，要么是使用选项API。我无法让ChartOptions工作。我不确定我是否应该删除图表选项，只做选项，或者如果有其他东西，我错过了，如进口。我尝试在chart-js import语句中导入ChartOptions，但它会出现错误。任何关于如何实现这一点的帮助都将是非常有帮助的。谢谢你，谢谢

<template>
  <Pie
    :chart-options="chartOptions"
    :chart-data="chartData"
    :chart-id="chartId"
    :dataset-id-key="datasetIdKey"
    :plugins="plugins"
    :css-classes="cssClasses"
    :styles="styles"
    :width="width"
    :height="height"
  />
</template>
<script>
import {ref, defineComponent, onMounted} from 'vue'
import {Pie} from 'vue-chartjs'
import {Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale} from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
export default defineComponent({
  name: 'SectorPieChart',
  components: { Pie },
  props: {
    chartId: {
      type: String,
      default: 'pie-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 500
    },
    height: {
      type: Number,
      default: 500
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => {}
    },
    plugins: {
      type: Object,
      default: () => {}
    }
  },
  setup() {
    //stores
    const portfolioStore = usePortfolioStore()
    const {portfolio} = storeToRefs(portfolioStore)
    //dataset
    const chartData = ref({
        labels: [ 'Basic Materials', 'Consumer Cyclical', 'Financial Services', 'Real Estate', 'Consumer Defensive', 'Healthcare', 'Utilities', 'Communication Services', 'Energy', 'Industrials', 'Technology'],
        datasets: [
          { 
            backgroundColor: ['#FF4A4A','#FFAC4A','#FFE9C9','#F9C87C','#F97432','#7a7979','#FFCC00','#FF9900','#86370e','#FFFF66','#ed9e67'],
            data: [1,1,1,1,1,1,1,1,1,1,1] 
          },
          { 
            backgroundColor: ['#FF4A4A','#FFAC4A','#FFE9C9','#F9C87C','#F97432','#7a7979','#FFCC00','#FF9900','#86370e','#FFFF66','#ed9e67'],
            data: [1,1,1,1,1,1,1,1,1,1,1] 
          }
        ]
    })
    //chart options to change settings
    const chartOptions = ref({
        responsive: true,
        maintainAspectRatio: true,
        legend: {
          display: false,
        }
      })
    //methods
    const loadData = () => {
    }
      
    //add on mount API request
    onMounted(() => {
      loadData()   
    })
    return {
      chartData, chartOptions, loadData
    }
  }
})
</script>

字符串