Chart.js 是一个开源的 JavaScript 数据可视化库，用于在网页应用中创建各种类型的图表，如折线图、柱状图、饼图、雷达图等。它提供了一个简单且易于使用的接口，使开发者能够以可视化的方式展示和分析数据。

Chart.js官网地址

本文中使用的版本为：Chart.js v2.8.0

下载地址：Chart.js v2.8.0

那么如何在LWC中展现出如图所示的饼状图呢？

第一步：将Chart.js v2.8.0下载下来

第二步：在环境中建立名为chartjs的静态资源，选择第一步下载的文件，保存并公开。

第三步：在LWC中加入"import CHART_JS from '@salesforce/resourceUrl/chartjs';"，也就是静态资源的相对路径。

最后参照示例代码，使用'lightning/platformResourceLoader'将CHART_JS导入并配置。

下面给出示例代码，仅供参考：

※chartjsInitialized参数的作用是防止renderedCallback()函数递归。

<template>
    <div style="display:block; background-color: white;height:50%;width:40%;">
        <canvas class="chartCanvas"></canvas>
    </div>
</template>

import { LightningElement, track } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import CHART_JS from '@salesforce/resourceUrl/chartjs';

export default class ChartJsPractice extends LightningElement {
    @track chartjsInitialized = false;

    renderedCallback() {
        if (this.chartjsInitialized) {
            return;
        }
        this.chartjsInitialized = true;
        const config = {
            type: 'pie',
            data: {
                labels: ['Red', 'Blue', 'Yellow'],
                datasets: [
                    {
                        data: [300, 50, 100],
                        backgroundColor: ['rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)'],
                    },
                ],
            },
        };

        Promise.all([
            loadScript(this, CHART_JS)
        ])
        .then(() => {
            const ctx = this.template.querySelector('canvas.chartCanvas').getContext('2d');
            new window.Chart(ctx, config);
        })
        .catch(error => {
            console.error('Error loading resources:', error);
        });
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__Tab</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
</LightningComponentBundle>