鸿蒙初体验（二）：使用JS FA应用的chart组件画一个简单线性图_鸿蒙 linechart

关于HarmonyOS 2.0相关应用软件的安装和使用可以参考鸿蒙初体验：从安装到第一个程序 Hello HarmonyOS
更多关于HarmonyOS 2.0JS FA应用的开发使用可以参考鸿蒙初体验（三）：使用JS FA应用写一个简单的猜数字游戏

话不多说直接直奔主题

一、创建项目

首先我们打开DevEco Studio新建一个Js项目

二、项目结构

建立完成后可以看到我们的目录结构是这样的

是不是很像我们的Vue了呢，没错HarmonyOS的JS FA应用也是通过node.js去封装的

1.目录结构

目录结构中文件分类如下：

• .hml结尾的HML模板文件，这个文件用来描述当前页面的文件布局结构。
• .css结尾的CSS样式文件，这个文件用于描述页面样式。
• .js结尾的JS文件，这个文件用于处理页面和用户的交互。

各个文件夹的作用：

• app.js文件用于全局JavaScript逻辑和应用生命周期管理。
• pages目录用于存放所有组件页面。
• common目录用于存放公共资源文件，比如：媒体资源，自定义组件和JS文件。
• resources目录用于存放资源配置文件，比如：全局样式、多分辨率加载等配置文件。
• i18n目录用于配置不同语言场景资源内容，比如应用文本词条，图片路径等资源。

i18n和resources是开发保留文件夹，不可重命名。

2.配置文件config.json

定义每个页面的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如：

<!--config.json-->
{
  ...
  "pages": [
    "pages/index/index", //首页，即entry入口
    "pages/detail/detail"
  ]
  ...
}
1
2
3
4
5
6
7
8
9

• pages列表中第一个页面是应用的首页，即entry入口。
• 页面文件名不能使用组件名称，比如：text.hml、button.hml等。

三、编写代码

index.css

.container {
    flex-direction: column;
}
.line{
    width: 90%;
    height: 90%;
}
1
2
3
4
5
6
7

index.hml

<div class ="container">
    <chart class="line" type="line" options="{{options}}" datasets="{{datasets}}"></chart>
</div>
1
2
3

index.js

export default {
    data: {
        options:{
            xAxis:{
                min:0,
                max:10,
                axisTick:10,
                display:true
            },
            yAxis:{
                min:0,
                max:10,
                axisTick:10,
                display:true
            }
        },
        datasets:[
            {
                data:[5,0,9,4,10,8,6,10,8,6],
                strokeColor:"#986",
            },
            {
                data:[4,2,4,7,8,4,6,9,4,10],
                strokeColor:"#234",
            }
        ],
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

四、效果图

五、知识拓展

官方JS API文档

options：主要是控制图、表、线这些参数

datasets：数组对象，一些数据和样式

六、总结

初学者学起来并不困难，文档很详细，比Java API更容易一定

学过Vue或js的朋友就更加是如鱼得水了，变化不大，适应一段时间应该就习惯了