莓创图表：从零到一打造鸿蒙 NEXT 原生组件，跟我一起探索原生组件库的无限可能

admin管理员组

文章数量:1037775

莓创图表：从零到一打造鸿蒙 NEXT 原生组件，跟我一起探索原生组件库的无限可能

莓创图表

第二件事呢，就是我们的莓创技术团队（其实目前就我一个人在维护，有没有想一起用爱发电的，可以联系我）从零到一打造鸿蒙 NEXT 原生组件：莓创图表 2.8 版本来了。历经两个月，我们重新调整组件的框架设计，不再是以前的单一设计模式。可以看看我们现在整体一个设计图

基础类

我这次把很多功能细化了一下，比如基础类里面就会把图例、轴线、提示层、线条、柱子等等都拆开，可以灵活调用，而且拓展性也很强。可以看一下具体代码：

动画类

在动画类里面我也是分了很多，有文字的、有线条的、有柱子的等等，这些都是不一样的动画效果。这次我们也是加入贝塞尔曲线来实现不同的动画效果，这个内容很多，后面我可以仔细讲讲（又欠了一篇）。

渲染类

这次只要讲一下渲染类这块的历程，花了很多时间，也跟华为提工单了很多问题。首先我们会将每个点都按照 30 帧去生成动画，比如文字、线条等等，这些都是按照帧去生成对应的动画，然后存放起来。最后通过渲染类来将内容逐帧渲染到画板上，后续我会跟动画类一起讲（又欠了一篇）。

图表

这次不光光从技术架构上更新，我们还适配了很多场景与新图表。比如：Y轴设置最大值与最小值、双Y轴、图例支持点击控制显示跟隐藏、折线与柱状图组合图、图例的排列组合、多组饼图、仪表盘、圆形雷达图等等。支持的案例已经高达70多种，欢迎大家使用，也欢迎大家来提出你们需求。

折线图

折线图在此次版本中新增了多条 Y 轴的展示以及优化了动画、图例可控制显示隐藏等，开箱即用的案例目前已有十几种

简单展示一下示例代码（写法很 echarts）

代码语言：javascript代码运行次数：0运行复制

import { McLineChart, Options } from '@mcui/mccharts'
@Entry@Componentstruct Index {  @State yAxisMinMaxDefOption: Options = new Options({    xAxis:{      data: ['周一','周二','周三','周四','周五','周六','周日'] // 数据    },    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 轴的展示以及渐变模式等多种场景，案例目前已有十几种

也是简单举个例子

代码语言：javascript代码运行次数：0运行复制

import { McBarChart, Options, chartInterface } from '@mcui/mccharts'
@Entry@Componentstruct Index {  @State seriesGradientOption: Options = new Options({    title: {      show: true,      text: '渐变柱状图',      right: 20,      top: 30    },    xAxis: {      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] // 数据    },    series: [      {        name: '白天气温',        gradient: {          color: ['#53e075', '#7953e075']        },        data: [30, 31, 35, 31, 28, 31, 31] // 数据      },      {        name: '夜间气温',        gradient: {          color: ['#fa6262', '#83fa6262']        },        data: [11, 11, 15, 13, 12, 13, 10] // 数据      }    ]  })
  build() {    Column() {      Row() {        McBarChart({          options: this.seriesGradientOption        })      }      .height('50%')    }  }}

复制代码

组合图

组合图是此次版本新增的图表，是本次更新中你们最期待的组件，经常收到相关的咨询，这次他来了。组合图融合了折线图跟柱状图的所有属性，案例高达二十几种

简单代码示例

代码语言：javascript代码运行次数：0运行复制

import { McLineBarChart, Options } from '@mcui/mccharts'
@Entry@Componentstruct Index {  @State yAxisDefOption: Options = new Options({    title: {      show: true,      text: '双Y轴',      right: 20,      top: 22    },    xAxis:{      data: ['周一','周二','周三','周四','周五','周六','周日'] // 数据    },    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%')  }}

复制代码

横向条形图

横向柱状图在此次版本中新增了圆角模式以及渐变模式等多种场景，案例目前也高达十几种

简单代码示例

代码语言：javascript代码运行次数：0运行复制

import { McHorBarChart, Options, chartInterface } from '@mcui/mccharts'
@Entry@Componentstruct Index {  @State seriesRadiusOption: Options = new Options({    title: {      show: true,      text: '圆角模式',      right: 20,      top: 30    },    xAxis:{      data: ['周一','周二','周三','周四','周五','周六','周日'] // 数据    },    series:[      {        name:'最高气温',        color: '#53e075', // 自定义颜色        barStyle: { // 柱子的样式配置          borderRadius: [0, 4, 4]        },        gradient: {          color: ['#53e075', '#7953e075']        },        data: [30, 31, 35, 31, 28, 31, 31] // 数据      }    ]  })  build() {    Row() {      McHorBarChart({        options: this.seriesRadiusOption      })    }    .height('50%')  }}

复制代码

饼图

饼图在此次更新中新增了玫瑰图与多饼图组合模式等场景、以及优化了动画效果，案例已到达 6 个以上

简单的示例

代码语言：javascript代码运行次数：0运行复制

import { McPieChart, Options } from '@mcui/mccharts'
@Entry@Componentstruct 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:'蓝河'},          {value:1548, name:'鸿蒙'}        ]      }    ]  })  build() {    Row() {      McPieChart({        options: this.roseTypeOption      })    }    .height('50%')  }}

复制代码

雷达图

雷达图在此次更新中新增了圆形模式与指标多元化的场景、以及优化了动画效果，案例已到达 6 个以上

简单的示例

代码语言：javascript代码运行次数：0运行复制

import { McRadarChart, Options } from '@mcui/mccharts'
@Entry@Componentstruct Index {   @State polygonOption: Options = new Options({    title: {      show: true,      text: '圆形雷达',      right: 20,      top: 30    },    radar: {      polygon: false,      indicator: [        { name: '鸿蒙' },        { name: 'ios'},        { name: '安卓'},        { name: 'Magic' },        { name: '我心澎湃' },        { name: '蓝河' }      ]    },    series: [      {                data: [1000, 800, 600, 700, 266, 132]      }    ]  })  build() {    Row() {      McRadarChart({        options: this.legendOption      })    }    .height('50%')  }}

复制代码

仪表盘

这次我们还开发了仪表盘新图表，除了支持常规的仪表盘场景，还增加环形模式以及多种环形的场景，案例也是拥有 6 个以上

简单示例代码

代码语言：javascript代码运行次数：0运行复制

import { McGaugeChart, Options } from '@mcui/mccharts'
@Entry@Componentstruct Index {    @State defOption: Options = new Options({      series: [        {          data: [ { name: '鸿蒙', value: 90 } ]        }      ]    })    build() {        Row() {          McGaugeChart({            options: this.defOption          })        }        .height('50%')    }}

莓创图表：从零到一打造鸿蒙 NEXT 原生组件，跟我一起探索原生组件库的无限可能

莓创图表

第二件事呢，就是我们的莓创技术团队（其实目前就我一个人在维护，有没有想一起用爱发电的，可以联系我）从零到一打造鸿蒙 NEXT 原生组件：莓创图表 2.8 版本来了。历经两个月，我们重新调整组件的框架设计，不再是以前的单一设计模式。可以看看我们现在整体一个设计图

基础类

我这次把很多功能细化了一下，比如基础类里面就会把图例、轴线、提示层、线条、柱子等等都拆开，可以灵活调用，而且拓展性也很强。可以看一下具体代码：

动画类

在动画类里面我也是分了很多，有文字的、有线条的、有柱子的等等，这些都是不一样的动画效果。这次我们也是加入贝塞尔曲线来实现不同的动画效果，这个内容很多，后面我可以仔细讲讲（又欠了一篇）。

渲染类

这次只要讲一下渲染类这块的历程，花了很多时间，也跟华为提工单了很多问题。首先我们会将每个点都按照 30 帧去生成动画，比如文字、线条等等，这些都是按照帧去生成对应的动画，然后存放起来。最后通过渲染类来将内容逐帧渲染到画板上，后续我会跟动画类一起讲（又欠了一篇）。

图表

这次不光光从技术架构上更新，我们还适配了很多场景与新图表。比如：Y轴设置最大值与最小值、双Y轴、图例支持点击控制显示跟隐藏、折线与柱状图组合图、图例的排列组合、多组饼图、仪表盘、圆形雷达图等等。支持的案例已经高达70多种，欢迎大家使用，也欢迎大家来提出你们需求。

折线图

折线图在此次版本中新增了多条 Y 轴的展示以及优化了动画、图例可控制显示隐藏等，开箱即用的案例目前已有十几种

简单展示一下示例代码（写法很 echarts）

代码语言：javascript代码运行次数：0运行复制

import { McLineChart, Options } from '@mcui/mccharts'
@Entry@Componentstruct Index {  @State yAxisMinMaxDefOption: Options = new Options({    xAxis:{      data: ['周一','周二','周三','周四','周五','周六','周日'] // 数据    },    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 轴的展示以及渐变模式等多种场景，案例目前已有十几种

也是简单举个例子

代码语言：javascript代码运行次数：0运行复制

import { McBarChart, Options, chartInterface } from '@mcui/mccharts'
@Entry@Componentstruct Index {  @State seriesGradientOption: Options = new Options({    title: {      show: true,      text: '渐变柱状图',      right: 20,      top: 30    },    xAxis: {      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] // 数据    },    series: [      {        name: '白天气温',        gradient: {          color: ['#53e075', '#7953e075']        },        data: [30, 31, 35, 31, 28, 31, 31] // 数据      },      {        name: '夜间气温',        gradient: {          color: ['#fa6262', '#83fa6262']        },        data: [11, 11, 15, 13, 12, 13, 10] // 数据      }    ]  })
  build() {    Column() {      Row() {        McBarChart({          options: this.seriesGradientOption        })      }      .height('50%')    }  }}

复制代码

组合图

组合图是此次版本新增的图表，是本次更新中你们最期待的组件，经常收到相关的咨询，这次他来了。组合图融合了折线图跟柱状图的所有属性，案例高达二十几种

简单代码示例

代码语言：javascript代码运行次数：0运行复制

import { McLineBarChart, Options } from '@mcui/mccharts'
@Entry@Componentstruct Index {  @State yAxisDefOption: Options = new Options({    title: {      show: true,      text: '双Y轴',      right: 20,      top: 22    },    xAxis:{      data: ['周一','周二','周三','周四','周五','周六','周日'] // 数据    },    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%')  }}

复制代码

横向条形图

横向柱状图在此次版本中新增了圆角模式以及渐变模式等多种场景，案例目前也高达十几种

简单代码示例

代码语言：javascript代码运行次数：0运行复制

import { McHorBarChart, Options, chartInterface } from '@mcui/mccharts'
@Entry@Componentstruct Index {  @State seriesRadiusOption: Options = new Options({    title: {      show: true,      text: '圆角模式',      right: 20,      top: 30    },    xAxis:{      data: ['周一','周二','周三','周四','周五','周六','周日'] // 数据    },    series:[      {        name:'最高气温',        color: '#53e075', // 自定义颜色        barStyle: { // 柱子的样式配置          borderRadius: [0, 4, 4]        },        gradient: {          color: ['#53e075', '#7953e075']        },        data: [30, 31, 35, 31, 28, 31, 31] // 数据      }    ]  })  build() {    Row() {      McHorBarChart({        options: this.seriesRadiusOption      })    }    .height('50%')  }}

复制代码

饼图

饼图在此次更新中新增了玫瑰图与多饼图组合模式等场景、以及优化了动画效果，案例已到达 6 个以上

简单的示例

代码语言：javascript代码运行次数：0运行复制

import { McPieChart, Options } from '@mcui/mccharts'
@Entry@Componentstruct 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:'蓝河'},          {value:1548, name:'鸿蒙'}        ]      }    ]  })  build() {    Row() {      McPieChart({        options: this.roseTypeOption      })    }    .height('50%')  }}

复制代码

雷达图

雷达图在此次更新中新增了圆形模式与指标多元化的场景、以及优化了动画效果，案例已到达 6 个以上

简单的示例

代码语言：javascript代码运行次数：0运行复制

import { McRadarChart, Options } from '@mcui/mccharts'
@Entry@Componentstruct Index {   @State polygonOption: Options = new Options({    title: {      show: true,      text: '圆形雷达',      right: 20,      top: 30    },    radar: {      polygon: false,      indicator: [        { name: '鸿蒙' },        { name: 'ios'},        { name: '安卓'},        { name: 'Magic' },        { name: '我心澎湃' },        { name: '蓝河' }      ]    },    series: [      {                data: [1000, 800, 600, 700, 266, 132]      }    ]  })  build() {    Row() {      McRadarChart({        options: this.legendOption      })    }    .height('50%')  }}

复制代码

仪表盘

这次我们还开发了仪表盘新图表，除了支持常规的仪表盘场景，还增加环形模式以及多种环形的场景，案例也是拥有 6 个以上

简单示例代码

代码语言：javascript代码运行次数：0运行复制

import { McGaugeChart, Options } from '@mcui/mccharts'
@Entry@Componentstruct Index {    @State defOption: Options = new Options({      series: [        {          data: [ { name: '鸿蒙', value: 90 } ]        }      ]    })    build() {        Row() {          McGaugeChart({            options: this.defOption          })        }        .height('50%')    }}

本文标签： 莓创图表从零到一打造鸿蒙 NEXT 原生组件，跟我一起探索原生组件库的无限可能