视频网址：
鸿蒙2.x系统应用开发 前端基础入门教程-12集全完结_哔哩哔哩_bilibili
https://www.bilibili.com/video/BV1p54y1G7WU?p=5&spm_id_from=pageDriver

一，基础组件介绍及Chart组件使用
组件（Component）是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。

鸿蒙 JS API 提供了完善的组件介绍，详细情况我们去查阅一下官方文档： 组件 - 官方介绍

根据组件的功能，可以分为以下四大类：
基础组件    text、image、progress、rating、span、marquee、image-animator、divider、                               search、menu、chart
容器组件    div、list、list-item、stack、swiper、tabs、tab-bar、tab-content、list-item-group、                        refresh、dialog
媒体组件    video
画布组件    canvas

chart组件体验使用

使用 chart 组件进行体验，具体执行步骤如下：

1. 创建 pages.chart 文件夹，包含 chart.hml、chart.js、chart.css 三个文件。
2. 配置路由，在 config.json 这个文件里面。
3. 

图片路径引用失败不会出现文件查找失败错误提示，建议使用绝对路径进行文件路径编码，官方文档介绍在输出 hap 文件后，真机会因为 webpack 打包解析出现找不到文件的问题，不过模拟器是正常的。

绝对路径输入没有路径自动补全提示，可以使用「相对路径」选择到对应的文件，然后，在去掉前面的相对路径引入。

在 index.hml 文件中导入对应的页面结构代码

导入 css 样式文件

.container {    flex-direction: column;    justify-content: center;    align-items: center;    left: 0px;    top: 0px;    width: 454px;    height: 454px;}.animator {    width: 70px;    height: 70px;}.btn-box {    width: 264px;    height: 120px;    flex-wrap: wrap;    justify-content: space-around;    align-items: center;}.btn {    border-radius: 8px;    width: 120px;    margin-top: 8px;}

设置图片文件 data model 并 export 出来 common.datas.imgs.js

export default [    {        src: "../images/heart50.png",    },    {        src: "../images/heart60.png",    },    {        src: "../images/heart70.png",    },    {        src: "../images/heart80.png",    },    {        src: "../images/heart90.png",    },    {        src: "../images/heart100.png"    }]

         4. 在 index.js 文件中导入图片模块，并写入相应逻辑，需要注意的是使用 $ref 获取到当前动画的节点对象。然后调用其对应的方法。

 import imgs from "../../common/datas/imgs.js" export default {     data: {         frames:imgs     },     handleStart() {         this.$refs.animator.start();     },     handlePause() {         this.$refs.animator.pause();     },     handleResume() {         this.$refs.animator.resume();    },     handleStop() {         this.$refs.animator.stop();     }, }