莓創(chuàng)圖表：從零到一打造鴻蒙NEXT原生組件，跟我一起探索原生組件庫的無限可能

大家好，我是陳楊。又隔了好久沒寫文章了，一直都在忙（其實(shí)是借口），沒有及時跟大家去分享一些技術(shù)相關(guān)的東西，今天來是跟大家分享兩件事。

發(fā)布會總結(jié)

第一件就是：前段時間我去參加了"原生鴻蒙之夜暨華為全場景新品發(fā)布會"，這次我首次參加產(chǎn)品發(fā)布會，在發(fā)布會上我看到了鴻蒙5.0 NEXT正式落地，也了解到了很多有意思的功能，簡單給大家介紹一下我覺得有意義的（個人意見）：

首先是HarmonyOS NEXT是鴻蒙系統(tǒng)的全新自研版本，徹底去除了Linux內(nèi)核和安卓開源項(xiàng)目代碼，只支持鴻蒙內(nèi)核和鴻蒙系統(tǒng)應(yīng)用。這樣的革新，旨在全面提升系統(tǒng)的流暢度、能效和安全性。

其實(shí)這個我沒啥可說的，就是牛逼就完了，我不是這個行業(yè)的專家也不去分析具體實(shí)現(xiàn)方式，一句話就是"遙遙領(lǐng)先，遠(yuǎn)遠(yuǎn)超越"。

image.png

第二個就是隱私安全，以前真的沒去仔細(xì)了解這方面，都不知道一個授權(quán)功能，APP就可以拿到你所有的內(nèi)容，這點(diǎn)著實(shí)可怕。在發(fā)布會上了解到原來隱私這么不安全，就像"國王的新衣"一樣。這次鴻蒙給我們帶來就是不一樣的隱私安全，你的數(shù)據(jù)你做主，給誰看，誰才能看。

image.png

第三個就是AI語音修復(fù)，我認(rèn)為一家技術(shù)科研公司，就應(yīng)該需要研發(fā)一些對社會有價值，或者帶領(lǐng)一群人去探索科技如何改變世界。而不是簡簡單單升級個照相機(jī)，加點(diǎn)電池容量跟快充速度就完了。而這次鴻蒙他做了，基于人工智能修復(fù)的語音功能，實(shí)現(xiàn)了言語障礙患者的修復(fù)成功率已超過80%，讓更多的無障礙群體能夠正常與人交流。在現(xiàn)場我覺得都很震撼（第一次參加，什么都感覺到震撼，哈哈哈哈）

[圖片上傳失敗...(image-746e46-1741754345744)]

好了，分享完第一件事了；這是我人生第一次參加發(fā)布會，挺有意思的，現(xiàn)場聽確實(shí)比較震撼，希望以后有機(jī)會多去參加幾次吧（得去舔工作人員了）。

莓創(chuàng)圖表

第二件事呢，就是我們的莓創(chuàng)技術(shù)團(tuán)隊(duì)（其實(shí)目前就我一個人在維護(hù)，有沒有想一起用愛發(fā)電的，可以聯(lián)系我）從零到一打造鴻蒙NEXT原生組件：莓創(chuàng)圖表2.8版本來了。歷經(jīng)兩個月，我們重新調(diào)整組件的框架設(shè)計，不再是以前的單一設(shè)計模式?？梢钥纯次覀儸F(xiàn)在整體一個設(shè)計圖

image.png

基礎(chǔ)類

我這次把很多功能細(xì)化了一下，比如基礎(chǔ)類里面就會把圖例、軸線、提示層、線條、柱子等等都拆開，可以靈活調(diào)用，而且拓展性也很強(qiáng)?？梢钥匆幌戮唧w代碼：

image.png

動畫類

在動畫類里面我也是分了很多，有文字的、有線條的、有柱子的等等，這些都是不一樣的動畫效果。這次我們也是加入貝塞爾曲線來實(shí)現(xiàn)不同的動畫效果，這個內(nèi)容很多，后面我可以仔細(xì)講講（又欠了一篇）。

渲染類

這次只要講一下渲染類這塊的歷程，花了很多時間，也跟華為提工單了很多問題。首先我們會將每個點(diǎn)都按照30幀去生成動畫，比如文字、線條等等，這些都是按照幀去生成對應(yīng)的動畫，然后存放起來。最后通過渲染類來將內(nèi)容逐幀渲染到畫板上，后續(xù)我會跟動畫類一起講（又欠了一篇）。

圖表

這次不光光從技術(shù)架構(gòu)上更新，我們還適配了很多場景與新圖表。比如：Y軸設(shè)置最大值與最小值、雙Y軸、圖例支持點(diǎn)擊控制顯示跟隱藏、折線與柱狀圖組合圖、圖例的排列組合、多組餅圖、儀表盤、圓形雷達(dá)圖等等。支持的案例已經(jīng)高達(dá)70多種，歡迎大家使用，也歡迎大家來提出你們需求。

折線圖

折線圖在此次版本中新增了多條Y軸的展示以及優(yōu)化了動畫、圖例可控制顯示隱藏等，開箱即用的案例目前已有十幾種

image.png

簡單展示一下示例代碼（寫法很echarts）

import { McLineChart, Options } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State yAxisMinMaxDefOption: Options = new Options({
    xAxis:{
      data: ['周一','周二','周三','周四','周五','周六','周日'] // 數(shù)據(jù)
    },
    yAxis: {
      name: '單位/攝氏度',
      min: 10,
      max: 15
    },
    series: [
      {
        name: '最高氣溫',
        data: [11, 11, 15, 13, 12, 13, 10]
      }
    ]
  })
  build() {
    Row() {
      McLineChart({
        options: this.yAxisMinMaxDefOption
      })
    }
    .height('50%')
  }
}

柱狀圖

柱狀圖在此次版本中新增了多條Y軸的展示以及漸變模式等多種場景，案例目前已有十幾種

image.png

也是簡單舉個例子

import { McBarChart, Options, chartInterface } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State seriesGradientOption: Options = new Options({
    title: {
      show: true,
      text: '漸變柱狀圖',
      right: 20,
      top: 30
    },
    xAxis: {
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] // 數(shù)據(jù)
    },
    series: [
      {
        name: '白天氣溫',
        gradient: {
          color: ['#53e075', '#7953e075']
        },
        data: [30, 31, 35, 31, 28, 31, 31] // 數(shù)據(jù)
      },
      {
        name: '夜間氣溫',
        gradient: {
          color: ['#fa6262', '#83fa6262']
        },
        data: [11, 11, 15, 13, 12, 13, 10] // 數(shù)據(jù)
      }
    ]
  })

  build() {
    Column() {
      Row() {
        McBarChart({
          options: this.seriesGradientOption
        })
      }
      .height('50%')
    }
  }
}

組合圖

組合圖是此次版本新增的圖表，是本次更新中你們最期待的組件，經(jīng)常收到相關(guān)的咨詢，這次他來了。組合圖融合了折線圖跟柱狀圖的所有屬性，案例高達(dá)二十幾種

image.png

簡單代碼示例

import { McLineBarChart, Options } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State yAxisDefOption: Options = new Options({
    title: {
      show: true,
      text: '雙Y軸',
      right: 20,
      top: 22
    },
    xAxis:{
      data: ['周一','周二','周三','周四','周五','周六','周日'] // 數(shù)據(jù)
    },
    yAxis: [
      {
        name: '銷售額',
       
      },
      {
        name: '人流量',
        position: 'right'
      }
    ],
    series: [
      {
        name: '人流量',
        data: [1000, 1200, 900, 1500, 900, 1200, 1000],
        type: 'line',
        yAxisIndex: 1
      },
      {
        name: '銷售額',
        data: [1500, 1700, 1400, 2000, 1400, 1700, 1500],
        type: 'bar'
      }
    ]
  })
  build() {
    Row() {
      McLineBarChart({
        options: this.yAxisOption
      })
    }
    .height('50%')
  }
}

橫向條形圖

橫向柱狀圖在此次版本中新增了圓角模式以及漸變模式等多種場景，案例目前也高達(dá)十幾種

image.png

簡單代碼示例

import { McHorBarChart, Options, chartInterface } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State seriesRadiusOption: Options = new Options({
    title: {
      show: true,
      text: '圓角模式',
      right: 20,
      top: 30
    },
    xAxis:{
      data: ['周一','周二','周三','周四','周五','周六','周日'] // 數(shù)據(jù)
    },
    series:[
      {
        name:'最高氣溫',
        color: '#53e075', // 自定義顏色
        barStyle: { // 柱子的樣式配置
          borderRadius: [0, 4, 4]
        },
        gradient: {
          color: ['#53e075', '#7953e075']
        },
        data: [30, 31, 35, 31, 28, 31, 31] // 數(shù)據(jù)
      }
    ]
  })
  build() {
    Row() {
      McHorBarChart({
        options: this.seriesRadiusOption
      })
    }
    .height('50%')
  }
}

餅圖

餅圖在此次更新中新增了玫瑰圖與多餅圖組合模式等場景、以及優(yōu)化了動畫效果，案例已到達(dá)6個以上

簡單的示例

import { McPieChart, Options } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State roseTypeOption: Options = new Options({
    title: {
      show: true,
      text: '玫瑰餅狀圖',
      left: 40,
      top: 20
    },
    series:[
      {
        roseType: true,
        data:[
          {value:435, name:'IOS'},
          {value:310, name:'安卓'},
          {value:234, name:'我心澎湃'},
          {value:135, name:'藍(lán)河'},
          {value:1548, name:'鴻蒙'}
        ]
      }
    ]
  })
  build() {
    Row() {
      McPieChart({
        options: this.roseTypeOption
      })
    }
    .height('50%')
  }
}

雷達(dá)圖

雷達(dá)圖在此次更新中新增了圓形模式與指標(biāo)多元化的場景、以及優(yōu)化了動畫效果，案例已到達(dá)6個以上

image.png

簡單的示例

import { McRadarChart, Options } from '@mcui/mccharts'

@Entry
@Component
struct Index {
   @State polygonOption: Options = new Options({
    title: {
      show: true,
      text: '圓形雷達(dá)',
      right: 20,
      top: 30
    },
    radar: {
      polygon: false,
      indicator: [
        { name: '鴻蒙' },
        { name: 'ios'},
        { name: '安卓'},
        { name: 'Magic' },
        { name: '我心澎湃' },
        { name: '藍(lán)河' }
      ]
    },
    series: [
      {
        
        data: [1000, 800, 600, 700, 266, 132]
      }
    ]
  })
  build() {
    Row() {
      McRadarChart({
        options: this.legendOption
      })
    }
    .height('50%')
  }
}

儀表盤

這次我們還開發(fā)了儀表盤新圖表，除了支持常規(guī)的儀表盤場景，還增加環(huán)形模式以及多種環(huán)形的場景，案例也是擁有6個以上

簡單示例代碼

import { McGaugeChart, Options } from '@mcui/mccharts'

@Entry
@Component
struct Index {
    @State defOption: Options = new Options({
      series: [
        {
          data: [ { name: '鴻蒙', value: 90 } ]
        }
      ]
    })
    build() {
        Row() {
          McGaugeChart({
            options: this.defOption
          })
        }
        .height('50%')
    }
}

總結(jié)

這次組件重構(gòu)加開發(fā)花了我一個多月，都是一個人在默默開發(fā)。但是看到鴻蒙的崛起有我付出的一份力，我就覺得很值（不要說了，用愛發(fā)電的人最帥，哈哈哈哈）謝謝大家的支持，如果你覺得可以請用你們的發(fā)財小手給我的組件點(diǎn)點(diǎn)贊。十分感謝！??！

本次更新的B站宣傳視頻地址：https://www.bilibili.com/video/BV1X9DAYcE6P/

官網(wǎng)地址：http://meichuangit.net.cn/

openHarmony地址：https://ohpm.openharmony.cn/#/cn/detail/@mcui%2Fmccharts

github地址：https://github.com/Yuan-Mr/mcCharts

gitee地址：https://gitee.com/cyaofeng_admin/mc-charts

商務(wù)合作

有需要商務(wù)合作的都可以找我們，不管是鴻蒙的定制開發(fā)，還是網(wǎng)站定制開發(fā)，都可以聯(lián)系我們。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容