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

矫情吗；* 2022-10-11 00:49 275阅读 0赞

# 场景 #

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

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/118274050][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118274050]

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

注：

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

# 组件介绍 #

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

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

[https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-overview-0000001056361791][https_developer.harmonyos.com_cn_docs_documentation_doc-references_js-apis-overview-0000001056361791]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

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

首先在pages下面新建chart目录

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

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

注意这里两个问题：

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

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

不然会提示无法预览

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

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

然后找到config.json

将路由添加进去。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3][]

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

将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点开预览窗口

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 5][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118274050]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118274050
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[https_developer.harmonyos.com_cn_docs_documentation_doc-references_js-apis-overview-0000001056361791]: https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-overview-0000001056361791
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: /images/20221005/cc76124652874441bfe3b2bf46765734.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: /images/20221005/a3acccf9b2ab46df873ec8612135fe44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: /images/20221005/fd71f1b87d874621a8f2bada830088a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3]: /images/20221005/0facab18a4454fcb8a22382fd5b54da9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4]: /images/20221005/40e477d9bb1f48a0bfe95c0dd0ac90a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 5]: /images/20221005/5c2d593fa7bf4d879342b90c820419a1.png