vue-chartjs 是 对 Chart.js 的封装，以组件的方式在vue中使用 Chart.js 提供的图表。

安装

npm i vue-chartjs chart.js

使用

1. 从 vue-chartjs 导入所需类型（Chart Types）的图表组件，并注册。在 Chart.js文档 可以对照。

   <script>
       // 导入 折现图组件 Line，绘制折线图表
       import { Line } from 'vue-chartjs';
       
       export default {        
           components : {Line}, // 注册组件
           // ...
       }
   </script>

2. 从 chart.js 导入所需要的构成，并完成注册。

   <script>
       // 控制台报错中，缺什么导什么就行，这里是 Line 组件 所需的构成
       import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement} from 'chart.js'
       ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement)
   </script>

3. 在模板中，使用图表组件，并通过 props 给图表组件传配置数据。有关配置见 Configuration | Chart.js (chartjs.org)。

   <template>
   	<!--图表组件所在的位置，即图表渲染时的位置-->
       <Line ref="lineChart"
             id="my-chart-id"
             :options="chartOptions"
             :data="chartData">
       </Line>
   </template>
   
   <script>
       // 无响应式，直接操作chart对象完成更新
       let chartData = {
           labels: [ 'January', 'February', 'March' ],
           datasets: [
               {
                   data : [40,  59,  81],
                   label : 'test',
                   backgroundColor: ['rgb(75, 192, 192)','rgb(75, 252, 192)','rgb(75, 192, 0)']
               }
           ]
       }
       // 无响应式，不更改这个数据
       let chartOptions= {
           responsive: true
       }
   </script>

4. 图表更新

   <script>
       setup() {            
           let lineChart = ref(null) // 创建一个空的响应式，会检测同名ref，并关联实例至这个响应式
           let NewChartData = {
               labels: [ /* ... */ ],
               datasets: [ /* ... */ ]
           }
           // 获取chart对象
           let chart = lineChart.value.chart
           // 直接操作chart完成更新，绕过诡异的响应式
           chart.data = NewChartData
           // 更新图表  
           chart.update()
   
           // 要把 lineChart 响应式返回，才能接收同名ref实例
           return {lineChart /*...*/}
       }
   </script>