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

小嵌

鸿蒙初体验（二）：使用JS FA应用的chart组件画一个简单线性图, 关于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“
    
  
•   ]
    
  
•   ...
    
  
• }
  

复制代码

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

三、编写代码 index.css

• .container {
    
  
•     flex-direction: column;
    
  
• }
    
  
• .line{
    
  
•     width: 90%;
    
  
•     height: 90%;
    
  
• }
    
  
• 
  

复制代码

index.hml

• <div class =“container“>
    
  
•     <chart class=“line“ type=“line“ options=“{{options}}“ datasets=“{{datasets}}“></chart>
    
  
• </div>
    
  
• 
  

复制代码

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“,
    
  
•             }
    
  
•         ],
    
  
•     }
    
  
• }
    
  
• 
  

复制代码


四、效果图
五、知识拓展 官方JS API文档

options：主要是控制图、表、线这些参数 datasets：数组对象，一些数据和样式


六、总结 初学者学起来并不困难，文档很详细，比Java API更容易一定。学过Vue或js的朋友就更加是如鱼得水了，变化不大，适应一段时间应该就习惯了。

文章转自：文化沙漠麦七