场景

鸿蒙基于JS搭建HelloWorld并修改国际化文件：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118274050

在上面基于JS搭建起来Hello World之后，对于组件的使用怎么用。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

组件介绍

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

关于组件的使用可以参考其官方文档

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-overview-0000001056361791

下面以chart组件为例，来学习组件的使用。

首先在pages下面新建chart目录

然后在此目录下新建index.hml、index.js、index.css

注意这里两个问题：

1、下面这三个文件必须是index,而不能是chart.hml

2、注意是index.hml 而不是index.html

不然会提示无法预览

并且在配置路由时也找不到该路径。

然后找到config.json

将路由添加进去。

然后找到官方的示例文档，分别将index.hml修改为

<div class="container"><stack class="data-region"><image class="data-background" src="common/background.png"></image><chart class="data-bar" type="bar" id="bar-chart" options="{{barOps}}" datasets="{{barData}}"></chart></stack>
</div>

将Index.css修改为

.container {flex-direction: column;justify-content: center;align-items: center;
}
.data-region {height: 400px;width: 700px;
}
.data-background {object-fit: fill;
}
.data-bar {width: 700px;height: 400px;
}

将index.js修改为

export default {data: {barData: [{fillColor: '#f07826',data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628],},{fillColor: '#cce5ff',data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410],},{fillColor: '#ff88bb',data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657],},],barOps: {xAxis: {min: 0,max: 20,display: true,axisTick: 15,},yAxis: {min: 0,max: 1000,display: true,},},}
}

然后打开Index.hml点开预览窗口

然后就可以根据自己的需要比照API中的属性说明进行修改

比如这里修改显示X轴和Y轴以及修改X的步长。

鸿蒙开发-基础组件介绍及chart组件使用相关推荐

云基础知识介绍及云组件部署
云基础知识介绍及云组件部署序言随着业务的发展,各类业务都有上云的需求,大家在工作中也会经常遇到各类公有云的场景,其实各大厂商的公有云功能都大相径庭.相信很多人有疑问,如何在公有云上部署相关云组件和 ...
微信小程序开发尚学堂介绍项目结构组件喧嚷事件模板
一.微信小程序介绍 1. 微信小程序介绍微信小程序,简称小程序,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应用. 说明: 小程 ...
oracle数据库各组件介绍,Oracle 数据库组件相关说明【第一部分】
参考MOS文档: Information On Installed Database Components and Schemas (文档 ID 472937.1) Oracle 组件可以通过下面的S ...
HVD Manager 无法通过验证该如何解决（HarmonyOS鸿蒙开发基础知识）
实战问题 HVD Manager 无法通过验证该如何解决? 解决方案 1.应该是浏览器问题,建议使用IE浏览器打开 2.更换网络试试,通常通过4G或5G热点可以解决未经授权禁止转载更多技术交流请加 ...
iOS开发基础篇——介绍C++内置函数
学习iOS开发,那么就一定要掌握C的部分,今天的内容是C++内置函数的部分,一起来学习一下吧! 调用函数时需要一定的时间和空间的开销,过程如下: 这只是一个参考! C++提供一种提高效率的方法,即在编 ...
鸿蒙开发-在JS中获取hml页面中Input输入的值
场景鸿蒙基于JS搭建HelloWorld并修改国际化文件: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118274050 在 ...
鸿蒙开发-实现页面跳转与页面返回
场景鸿蒙基于JS搭建HelloWorld并修改国际化文件: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118274050 在 ...
鸿蒙开发-新建Ability与使用image-animator实现图帧动画
场景鸿蒙开发-基础组件介绍及chart组件使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118333539 在上面学习了 ...
Unity基础笔记（1）—— Unity基本操作与基本组件介绍
Unity 基本操作与组件一.Unity 基本操作 1. Unity 界面详解 Hierachy:层级面板,游戏场景中的资源,比如UI.模型: Scene:场景面板,用于管理游戏场景中的各种游戏物体 ...

鸿蒙开发-基础组件介绍及chart组件使用

场景

组件介绍

鸿蒙开发-基础组件介绍及chart组件使用相关推荐

最新文章

热门文章