图表组件基于 Chart.js，一个基于 HTML5 的开源图表库。
import Chart from 'primevue/chart';
图表组件底层使用 Chart.JS，因此需要将其安装为依赖项。
npm install chart.js
图表通过 3 个属性进行配置；type、data 和 options。图表类型使用 type 属性定义，该属性接受 pie、doughtnut、line、bar、radar 和 polarArea 作为值。data 定义图表表示的数据集，options 提供许多自定义选项来定制演示。
<Chart type="bar" :data="chartData" :options="chartOptions" />
饼图是一个圆形统计图形，它被分成几片来表示数值比例。
<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
甜甜圈图是饼图的变体，中心空白，允许包含关于数据的整体的附加信息。
<Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
条形图或条形图是一种图表，它用长度与它们所代表的值成比例的矩形条来呈现分组数据。
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
当 indexAxis 选项设置为 y 时，条形图会水平呈现。
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
当刻度的 stacked 选项启用时，条形可以彼此堆叠。
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
折线图或折线图是一种图表，它将信息显示为一系列称为“标记”的数据点，这些数据点由直线段连接。
<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
可以使用 scales 选项添加多个轴。
<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
折线序列的各种样式可以自定义以显示诸如面积图之类的自定义。
<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
极地区域图类似于饼图，但每个扇区的角度相同 - 扇区的半径根据值而变化。
<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
雷达图是一种图形方法，用于以二维图表的形式显示多元数据，该二维图表在从同一点开始的轴上表示三个或更多定量变量。
<Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
可以在同一图表中使用数据集的 type 选项组合不同的图表类型。
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
图表组件在内部使用 canvas 元素，有关更多信息，请参阅 Chart.js 辅助功能指南。可以使用 canvasProps 属性自定义 canvas 元素以定义 aria 角色和属性，此外，组件内的任何内容都直接作为 canvas 的子元素传递，以便能够提供回退内容（如表格）。
<Chart type="line" :data="data" :canvasProps="{'role': 'img', 'aria-label': 'Data'}" />