想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com/#zz

一、運(yùn)行效果

在頁(yè)面中分別使用紅色、黃色和藍(lán)色顯示三組柱狀圖，如下圖所示：

二、實(shí)現(xiàn)思路

通過(guò)將組件chart的屬性type設(shè)置為"bar"來(lái)繪制一張柱狀圖。在組件chart中，通過(guò)動(dòng)態(tài)綁定的方式指定屬性options和datasets的值，以對(duì)圖形的參數(shù)進(jìn)行設(shè)置。

三、代碼詳解

打開(kāi)文件index.hml。

將組件text中顯示的頁(yè)面標(biāo)題修改為：柱狀圖。

在頁(yè)面標(biāo)題的下方添加一個(gè)組件chart。在組件chart中，通過(guò)動(dòng)態(tài)綁定的方式將屬性options和datasets的值分別設(shè)置為"{{options}}"和"{{datasets}}"。將屬性type的值設(shè)置為"{{bar}}"，以顯示一張柱狀圖。

代碼如下所示：

<div class="container"> 
    <text class="title"> 
        柱狀圖 
    </text> 
    <chart class="chart" type="bar" options="{{options}}" datasets="{{datasets}}"> 
    </chart> 
</d 

分別定義三個(gè)類選擇器，以定義index.hml中組件div、text和chart的樣式。

代碼如下所示：

container { 
    width: 454px; 
    height: 454px; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: center; 
} 
.title { 
    width: 240px; 
    height: 90px; 
    margin-top: 40px; 
    font-size: 38px; 
    text-align: center; 
} 
.chart { 
    width: 400px; 
    height: 200px; 
} 

 打開(kāi)文件index.js。

在data中將占位符options的值初始化為一個(gè)字典，該字典中包含兩個(gè)元素，分別用于設(shè)置x軸和y軸的參數(shù)。第一個(gè)元素的key是xAxis，對(duì)應(yīng)的value是一個(gè)字典，該字典中只包含一個(gè)元素，對(duì)應(yīng)的key和value分別是axisTick和10，用于設(shè)置x軸上的刻度數(shù)量。在options對(duì)應(yīng)的字典中，第二個(gè)元素的key是yAxis，對(duì)應(yīng)的value是一個(gè)由兩個(gè)元素組成的字典，分別用于設(shè)置y軸的最大值和刻度數(shù)量，其中，兩個(gè)元素的key分別是max和axisTick，對(duì)應(yīng)的value分別是100和1。

在data中將占位符datasets的值初始化為一個(gè)字典的數(shù)組，該數(shù)組中包含三個(gè)字典。第一個(gè)字典中只包含一個(gè)元素，元素的key是data，對(duì)應(yīng)的value是一個(gè)整數(shù)數(shù)組。第二個(gè)字典和第三個(gè)字典中都包含兩個(gè)元素，第一個(gè)元素指定柱狀圖對(duì)應(yīng)的整數(shù)數(shù)組，第二個(gè)元素指定柱狀圖填充的顏色。

代碼如下所示：

export default { 
    data: { 
        options: { 
            xAxis: { 
                axisTick: 10  
            }, 
            yAxis: { 
                max: 100,  
                axisTock: 1,  
            } 
        }, 
        datasets: [ 
            { 
                data: [33, 96, 53, 25, 99, 39, 59, 16, 22, 99], 
            }, 
            { 
                data:[45, 10, 80, 18, 21, 35, 86, 70, 84, 36], 
                fillColor: "#ffff00" 
            }, 
            { 
                data: [38, 80, 70, 69, 74, 47, 26, 67, 32, 28], 
                fillColor: "#4169e1" 
            }, 
        ] 
    } 
} 

 保存所有代碼后打開(kāi)模擬器，運(yùn)行效果如下圖所示：

項(xiàng)目源代碼，請(qǐng)見(jiàn)附件。

歡迎訂閱我的專欄【圖解鴻蒙】：

https://harmonyos.51cto.com/column/27

©著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請(qǐng)注明出處，否則將追究法律責(zé)任

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com/#zz