鸿蒙HarmonyOS NEXT开发：使用三方库实现Echarts图表功能的实战指南

企业开发 2025-04-08 11:14:24 阅读次数: 0

文章目录

一、ECharts介绍

1、基本概述

ECharts是一个基于JavaScript的图表库，它提供了丰富的图表类型和交互功能，使开发者能够在网页中创建各种类型的交互式图表和数据可视化效果。无论是折线图、柱状图、饼图，还是散点图、雷达图、地图等，ECharts都能轻松应对。

2、主要特点

丰富的图表类型：ECharts支持多种图表类型，几乎涵盖了所有数据可视化需求，可以满足不同类型的数据分布和趋势展示。
可定制性：用户可以通过调整样式、颜色、标签、图例等配置项，自定义图表的外观，以适应特定的设计需求和品牌风格。
动画效果：ECharts提供了丰富的动画效果，这些动画效果可以增强用户体验，使数据的变化更加生动和吸引人。
响应式设计：ECharts支持响应式设计，图表可以自动适应不同屏幕大小和设备类型，保证在不同设备上都能良好展示。
交互性：ECharts可以响应用户的交互行为，如点击、滚动、拖拽等，实现数据的动态更新和切换。
数据驱动：ECharts采用数据驱动的方式，用户只需提供相应的数据，即可生成相应的图表，简化了图表的创建过程。
高性能：ECharts针对大数据量的图表进行了性能优化，可以在处理大型数据集时保持较高的性能表现。

3、应用场景

数据分析和报告：ECharts可用于生成各种数据分析报表，帮助用户更好地理解数据并得出洞察和结论。
大数据可视化：对于大数据集，ECharts具有良好的性能和优化机制，可以轻松处理大量数据点，并展示大规模数据的趋势和分布。
实时监控和仪表盘：ECharts支持实时更新图表数据，可用于实时监控和仪表盘的开发，如实时展示传感器数据、网络流量、股票价格等。
地理信息可视化：ECharts提供地图组件，可用于地理信息可视化和地图展示，如绘制热力图、散点图和地图线等。
BI应用：在商业智能（BI）应用中，ECharts可以作为数据展示的重要组件，帮助用户轻松地创建交互式和吸引人的数据报表。
数据监控与分析平台：ECharts可用于展示数据指标、异常情况、趋势变化等，为数据监控与分析平台提供丰富的图表类型和交互功能。

二、openharmony_echarts

本库基于echarts 原库v5.5.1版本进行适配，使其可以运行在 OpenHarmony，并沿用其现有用法和特性。

当前最新版本

@wuyan/hm_chart(V2.0.4)

三. 如何安装

1、方式一

在DevEco Studio的底部找到"Terminal"
输入：ohpm install @wuyan/hm_chart

在这里插入图片描述

输出：install completed in xxx s，就表示安装成功

1、方式二

在工程的根目录找到oh_package.json5文件
在"dependencies"中增加@wuyan/hm_chart": “2.0.4”

在这里插入图片描述

点击上方的“Sync Now”
等待安装成功

四、如何使用

1、静态数据示例演示

import { hmChart, ChartOptions, hmChartType } from "@wuyan/hm_chart"

@Entry
@Component
struct HmChartPage {
  @State myChart: hmChartType | null = null
  @State Options:ChartOptions = {
    grid: {
      left: '2%',
      right: '2%',
      bottom: '4%',
      top:"8%",
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
      trigger: 'axis'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  };

  build() {
    Column() {
      Column() {
        hmChart({ Options: this.Options, myChart: this.myChart })
      }
      .width('98%')
      .height('400')
    }
    .height('100%')
    .width('100%')
  }
}

预览效果如下图所示

在这里插入图片描述

2、异步动态数据示例演示

import { hmChart, ChartOptions, hmChartType } from "@wuyan/hm_chart"


@Entry
@Component
struct HmChartPage {
  @State myChart: hmChartType | null = null
  @State Options:ChartOptions = {
    grid: {
      left: '2%',
      right: '2%',
      bottom: '4%',
      top:"8%",
      containLabel: true
    },
    color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'],
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
      trigger: 'axis'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  };

  build() {
    Column() {
      Row(){
        Button('异步加载')
          .onClick(()=>{
            const Options:ChartOptions = {
              series: [
                {
                  data: [200, 3, 91, 634, 190, 330, 132],
                  type: 'line',
                  smooth: true
                },
                {
                  data: [1000, 223, 791, 134, 990, 30, 732],
                  type: 'line',
                  smooth: true
                }
              ]
            }
            if(this.myChart){
              this.myChart.setOption(Options)
            }
          })
      }
      Column() {
        hmChart({ Options: this.Options, myChart: this.myChart })
      }
      .width('98%')
      .height('400')
    }
    .height('100%')
    .width('100%')
  }
}

预览效果如下图所示

默认	点击按钮

3、柱状图示例演示

import { hmChart, ChartOptions, hmChartType } from "@wuyan/hm_chart"


@Entry
@Component
struct HmChartPage {
  @State myChart: hmChartType | null = null
  @State Options: ChartOptions = {
    grid: {
      left: '2%',
      right: '2%',
      bottom: '4%',
      top: "8%",
      containLabel: true
    },
    color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
      trigger: 'axis'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar',
      },
      {
        data: [1000, 223, 791, 134, 990, 30, 732],
        type: 'bar',
      }
    ]
  };

  build() {
    Column() {
      Column() {
        hmChart({ Options: this.Options, myChart: this.myChart })
      }
      .width('98%')
      .height('400')
    }
    .height('100%')
    .width('100%')
  }
}

预览效果如下图所示
在这里插入图片描述

4、柱状图与折线图结合示例演示

import { hmChart, ChartOptions, hmChartType } from "@wuyan/hm_chart"


@Entry
@Component
struct HmChartPage {
  @State myChart: hmChartType | null = null
  @State Options: ChartOptions = {
    grid: {
      left: '2%',
      right: '2%',
      bottom: '4%',
      top: "8%",
      containLabel: true
    },
    color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
      trigger: 'axis'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
      },
      {
        data: [1000, 223, 791, 134, 990, 30, 732],
        type: 'bar',
      }
    ]
  };

  build() {
    Column() {
      Column() {
        hmChart({ Options: this.Options, myChart: this.myChart })
      }
      .width('98%')
      .height('400')
    }
    .height('100%')
    .width('100%')
  }
}

预览效果如下图所示

在这里插入图片描述