返回发烧友论坛
发 帖  

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

李永每
2020-12-21 14:17:09
阅读量0
鸿蒙系统
0
1
关于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
定义每个页面的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如：
  1. <!--config.json-->
  2. {
  3.   ...
  4.   "pages": [
  5.     "pages/index/index", //首页，即entry入口
  6.     "pages/detail/detail"
  7.   ]
  8.   ...
  9. }
复制代码
  • pages列表中第一个页面是应用的首页，即entry入口。
  • 页面文件名不能使用组件名称，比如：text.hml、button.hml等。
三、编写代码
index.css
  1. .container {
  2.     flex-direction: column;
  3. }
  4. .line{
  5.     width: 90%;
  6.     height: 90%;
  7. }
复制代码

index.hml
  1. <div class ="container">
  2.     <chart class="line" type="line" options="{{options}}" datasets="{{datasets}}"></chart>
  3. </div>
复制代码

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

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

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

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

文章转自：文化沙漠麦七

举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友