HarmonyOS開發(fā)案例：【 switch、chart組件的使用】

介紹

基于switch組件和chart組件，實(shí)現(xiàn)線形圖、占比圖、柱狀圖，并通過switch切換chart組件數(shù)據(jù)的動(dòng)靜態(tài)顯示。要求實(shí)現(xiàn)以下功能：

1. 實(shí)現(xiàn)靜態(tài)數(shù)據(jù)可視化圖表。
2. 打開開關(guān)，實(shí)現(xiàn)靜態(tài)圖切換為動(dòng)態(tài)可視化圖表。

相關(guān)概念

• [switch組件]：開關(guān)選擇器，通過開關(guān)，開啟或關(guān)閉某個(gè)功能。
• [chart組件]：圖表組件，用于呈現(xiàn)線形圖、占比圖、柱狀圖界面。

環(huán)境搭建

軟件要求

• [DevEco Studio]版本：DevEco Studio 3.1 Release及以上版本。
• OpenHarmony SDK版本：API version 9及以上版本。

硬件要求

• 開發(fā)板類型：[潤和RK3568開發(fā)板]。
• OpenHarmony系統(tǒng)：3.2 Release及以上版本。

環(huán)境搭建

完成本篇Codelab我們首先要完成開發(fā)環(huán)境的搭建，本示例以RK3568開發(fā)板為例，參照以下步驟進(jìn)行：

1. [獲取OpenHarmony系統(tǒng)版本]：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）。以3.2 Release版本為例：
   
2. 搭建燒錄環(huán)境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開發(fā)板的燒錄]
3. 搭建開發(fā)環(huán)境。
   1. 開始前請(qǐng)參考[工具準(zhǔn)備]，完成DevEco Studio的安裝和開發(fā)環(huán)境配置。
   2. 開發(fā)環(huán)境配置完成后，請(qǐng)參考[使用工程向?qū)創(chuàng)建工程（模板選擇“Empty Ability”）。
   3. 工程創(chuàng)建完成后，選擇使用[真機(jī)進(jìn)行調(diào)測]。
   4. 鴻蒙開發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

代碼結(jié)構(gòu)解讀

本篇Codelab只對(duì)核心代碼進(jìn)行講解，對(duì)于完整代碼，我們會(huì)在gitee中提供。

HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿

├──entry/src/main/js	     // 代碼區(qū)
│  └──MainAbility
│     ├──common
│     │  └──images           // 圖片資源
│     ├──i18n                // 國際化中英文
│     │  ├──en-US.json			
│     │  └──zh-CN.json			
│     ├──pages
│     │  └──index
│     │     ├──index.css     // 首頁樣式文件	
│     │     ├──index.hml     // 首頁布局文件
│     │     └──index.js      // 首頁業(yè)務(wù)處理文件
│     └──app.js              // 程序入口
└──entry/src/main/resources  // 應(yīng)用資源目錄

構(gòu)建主界面

本章節(jié)將介紹應(yīng)用主頁面的實(shí)現(xiàn)，頁面從上至下分為兩個(gè)部分：

1. 使用switch組件實(shí)現(xiàn)切換按鈕，用于控制chart組件數(shù)據(jù)的動(dòng)靜態(tài)顯示。
2. 使用chart組件依次實(shí)現(xiàn)線形圖、占比圖、柱狀圖。

本應(yīng)用使用div組件用作外層容器，嵌套text、chart、switch等基礎(chǔ)組件，共同呈現(xiàn)圖文顯示的效果。

< !-- index.hml -- >
< div class="container" >
    < !-- 自定義標(biāo)題組件 -- >
    < div class="switch-block" >
        < text class="title" >Switch_Chart< /text >
        < text class="switch-info" >{{ $t('strings.switchInfo') }}< /text >
        < !-- switch按鈕組件 -- >
        < switch onchange="change" >< /switch >
    < /div >
< /div >

在線形圖中，lineOps用于設(shè)置線形圖參數(shù)，包括曲線的樣式、端點(diǎn)樣式等。lineData 為線形圖的數(shù)據(jù)。

< !-- index.hml -- >
< div class="container" >
    ....
    < !-- 線形圖組件 -- >
    < div class="chart-block" >
        < stack class="stack-center" >
            < image class="background-image" src="common/images/bg_png_line.png" >< /image >
            < !-- 線形圖 -- >
            < chart class="chart-data" type="line" ref="linechart" options="{{ lineOps }}" datasets="{{ lineData }}" >
            < /chart >
        < /stack >
        < !-- 線形圖標(biāo)題 -- >
        < text class="text-vertical" >{{ $t('strings.lineTitle') }}< /text >
    < /div >
< /div >

相對(duì)于線形圖，占比圖添加了自定義圖例。其中rainBowData為占比圖的數(shù)據(jù)。

< !-- index.hml -- >
< div class="container" >
    ....
    < !-- 占比圖組件 -- >
    < div class="gauge-block" >
        < div class='flex-row-center full-size' >
            < stack class="flex-row-center rainbow-size" >
                < !-- 占比圖組件 -- >
                < chart class="data-gauge" type="rainbow" segments="{{ rainBowData }}" effects="true"
                        animationduration="2000" >< /chart >
                ...
            < /stack >
            < div class='flex-column' >
                < !-- 自定義圖例 -- >    
                < div class="chart-legend-item" >
                    < div class="chart-legend-icon rainbow-color-photo" >< /div >
                    < text class="chart-legend-text" >{{ this.$t('strings.legendPhoto') }} 64GB< /text >
                < /div >
                ....
            < /div >
        < /div >
        < !-- 占比圖標(biāo)題 -- >
        < text class="text-vertical" >{{ $t('strings.rainBowTitle') }}< /text >
    < /div >
< /div >

在柱狀圖中，barOps用于設(shè)置柱狀圖參數(shù)，barData為柱狀圖數(shù)據(jù)。

< !-- index.hml -- >
< div class="container" >
    < div class="bar-block" >
        < div class="flex-column full-size" >
            < !-- 自定義圖例 -- >
            ...
            < stack class="full-size bar-height" >
                < image class="background-image" src="common/images/bg_png_bar.png" >< /image >
                < !-- 柱狀圖 -- >
                < chart class="data-bar" type="bar" id="bar-chart1" options="{{ barOps }}" datasets="{{ barData }}" >  
                < /chart >
            < /stack >
        < /div >
        < !-- 柱狀圖標(biāo)題 -- >
        < text class="text-vertical" >{{ $t('strings.barTitle') }}< /text >
    < /div >
< /div >

動(dòng)態(tài)顯示數(shù)據(jù)

在上一章節(jié)講解了switch組件實(shí)現(xiàn)切換按鈕，接下來實(shí)現(xiàn)switch按鈕的點(diǎn)擊事件。在回調(diào)方法中設(shè)置chart組件靜態(tài)或動(dòng)態(tài)顯示，靜態(tài)時(shí)chart組件顯示靜態(tài)數(shù)據(jù)，動(dòng)態(tài)時(shí)利用interval定時(shí)器動(dòng)態(tài)生成并顯示隨機(jī)數(shù)據(jù)。

// index.js
export default {
  ...

  /**
   * switch按鈕點(diǎn)擊事件的回調(diào)方法
   */
  change(event) {
    if (event.checked) {
      // 線形圖、柱狀圖數(shù)據(jù)定時(shí)器
      this.interval = setInterval(() = > {
        // 更新線形圖數(shù)據(jù)
        this.changeLine();
        // 更新柱狀圖數(shù)據(jù)
        this.changeBar();
      }, 1000);
      // 占比圖數(shù)據(jù)定時(shí)器
      this.rainbowInterval = setInterval(() = > {
        // 更新占比圖數(shù)據(jù)
        this.changeGauge();
      }, 3000);
    } else {
      clearInterval(this.interval);
      clearInterval(this.rainbowInterval);
    }
  }
}

實(shí)現(xiàn)changeLine方法更新線形圖數(shù)據(jù)。遍歷所有數(shù)據(jù)，重新生成隨機(jī)數(shù)并設(shè)置每個(gè)點(diǎn)的數(shù)據(jù)、形狀、大小和顏色，最后為lineData重新賦值。

// index.js
export default {
  ...
  /**
   * 更新線形圖數(shù)據(jù)
   */
  changeLine() {
    const dataArray = [];
    for (let i = 0; i < this.dataLength; i++) {
      const nowValue = Math.floor(Math.random() * CommonConstants.LINE_RANDOM_MAX + 1);
      const obj = {
        // y軸的值
        'value': nowValue,
        'pointStyle': {
          // 點(diǎn)的形狀
          'shape': 'circle',
          'size': CommonConstants.LINE_POINT_SIZE,
          'fillColor': '#FFFFFF',
          'strokeColor': '#0A59F7'
        }
      };
      dataArray.push(obj);
    }
    this.lineData = [
      {
        // 曲線顏色
        strokeColor: '#0A59F7',
        // 漸變填充顏色
        fillColor: '#0A59F7', 
        data: dataArray,
        gradient: true
      }
    ];
  }
}

實(shí)現(xiàn)changeGauge方法更新占比圖數(shù)據(jù)，每三秒增長5%的數(shù)據(jù)。

// index.js
export default {
  ...
  /**
   * 更新占比圖數(shù)據(jù)
   */
  changeGauge() {
    const sysData = this.rainBowData[this.rainBowData.length - 2];
    sysData.value += addPercent;
    this.percent += addPercent;
    // 小數(shù)相加，保留一位小數(shù)
    this.used = (this.used * coefficients + addSize * coefficients) / coefficients;
    this.systemDataSize = (this.systemDataSize * coefficients + addSize * coefficients) / coefficients;
    // 數(shù)據(jù)總和到達(dá)100%后恢復(fù)初始數(shù)據(jù)
    if (sysData.value + CommonConstants.RAINBOW_OTHER_PERCENT > CommonConstants.RAINBOW_ALL_PERCENT) {
      sysData.value = CommonConstants.RAINBOW_SYSTEM_PERCENT;
      this.percent = CommonConstants.RAINBOW_USED_PERCENT;
      this.used = CommonConstants.RAINBOW_USED_SIZE;
      this.systemDataSize = CommonConstants.RAINBOW_SYSTEM_SIZE;
    }
    this.rainBowData = this.rainBowData.splice(0, this.rainBowData.length);
  },
}

實(shí)現(xiàn)changeBar方法更新柱狀圖數(shù)據(jù)。遍歷柱狀圖所有的數(shù)據(jù)組，獲取每組的數(shù)據(jù)后，再次遍歷每組數(shù)據(jù)，生成隨機(jī)數(shù)并為barData重新賦值。

// index.js
export default {
  ...
  /**
   * 更新柱狀圖數(shù)據(jù)
   */
  changeBar() {
    for (let i = 0; i < this.barGroup; i++) {
      const dataArray = this.barData[i].data;
      for (let j = 0; j < this.dataLength; j++) {
        dataArray[j] = Math.floor(Math.random() * CommonConstants.BAR_RANDOM_MAX + 1);
      }
    }
    this.barData = this.barData.splice(0, this.barGroup + 1);
  }
}

sf