場景

鴻蒙基于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组件使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。