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

一、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，并沿用其现有效法和特性。

• 当前最新版本
  

1. @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、静态数据示例演示

1. import { hmChart, ChartOptions, hmChartType } from "@wuyan/hm_chart"
3. @Entry
4. @Component
5. struct HmChartPage {
6.   @State myChart: hmChartType | null = null
7.   @State Options:ChartOptions = {
8.     grid: {
9.       left: '2%',
10.       right: '2%',
11.       bottom: '4%',
12.       top:"8%",
13.       containLabel: true
14.     },
15.     xAxis: {
16.       type: 'category',
17.       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
18.     },
19.     yAxis: {
20.       type: 'value'
21.     },
22.     tooltip: {
23.       trigger: 'axis'
24.     },
25.     series: [
26.       {
27.         data: [820, 932, 901, 934, 1290, 1330, 1320],
28.         type: 'line',
29.         smooth: true
30.       }
31.     ]
32.   };
34.   build() {
35.     Column() {
36.       Column() {
37.         hmChart({ Options: this.Options, myChart: this.myChart })
38.       }
39.       .width('98%')
40.       .height('400')
41.     }
42.     .height('100%')
43.     .width('100%')
44.   }
45. }

复制代码

预览效果如下图所示

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

1. import { hmChart, ChartOptions, hmChartType } from "@wuyan/hm_chart"
4. @Entry
5. @Component
6. struct HmChartPage {
7.   @State myChart: hmChartType | null = null
8.   @State Options:ChartOptions = {
9.     grid: {
10.       left: '2%',
11.       right: '2%',
12.       bottom: '4%',
13.       top:"8%",
14.       containLabel: true
15.     },
16.     color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'],
17.     xAxis: {
18.       type: 'category',
19.       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
20.     },
21.     yAxis: {
22.       type: 'value'
23.     },
24.     tooltip: {
25.       trigger: 'axis'
26.     },
27.     series: [
28.       {
29.         data: [820, 932, 901, 934, 1290, 1330, 1320],
30.         type: 'line',
31.         smooth: true
32.       }
33.     ]
34.   };
36.   build() {
37.     Column() {
38.       Row(){
39.         Button('异步加载')
40.           .onClick(()=>{
41.             const Options:ChartOptions = {
42.               series: [
43.                 {
44.                   data: [200, 3, 91, 634, 190, 330, 132],
45.                   type: 'line',
46.                   smooth: true
47.                 },
48.                 {
49.                   data: [1000, 223, 791, 134, 990, 30, 732],
50.                   type: 'line',
51.                   smooth: true
52.                 }
53.               ]
54.             }
55.             if(this.myChart){
56.               this.myChart.setOption(Options)
57.             }
58.           })
59.       }
60.       Column() {
61.         hmChart({ Options: this.Options, myChart: this.myChart })
62.       }
63.       .width('98%')
64.       .height('400')
65.     }
66.     .height('100%')
67.     .width('100%')
68.   }
69. }

复制代码

预览效果如下图所示
默认点击按钮

3、柱状图示例演示

1. import { hmChart, ChartOptions, hmChartType } from "@wuyan/hm_chart"
4. @Entry
5. @Component
6. struct HmChartPage {
7.   @State myChart: hmChartType | null = null
8.   @State Options: ChartOptions = {
9.     grid: {
10.       left: '2%',
11.       right: '2%',
12.       bottom: '4%',
13.       top: "8%",
14.       containLabel: true
15.     },
16.     color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
17.     xAxis: {
18.       type: 'category',
19.       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
20.     },
21.     yAxis: {
22.       type: 'value'
23.     },
24.     tooltip: {
25.       trigger: 'axis'
26.     },
27.     series: [
28.       {
29.         data: [820, 932, 901, 934, 1290, 1330, 1320],
30.         type: 'bar',
31.       },
32.       {
33.         data: [1000, 223, 791, 134, 990, 30, 732],
34.         type: 'bar',
35.       }
36.     ]
37.   };
39.   build() {
40.     Column() {
41.       Column() {
42.         hmChart({ Options: this.Options, myChart: this.myChart })
43.       }
44.       .width('98%')
45.       .height('400')
46.     }
47.     .height('100%')
48.     .width('100%')
49.   }
50. }

复制代码

预览效果如下图所示

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

1. import { hmChart, ChartOptions, hmChartType } from "@wuyan/hm_chart"
4. @Entry
5. @Component
6. struct HmChartPage {
7.   @State myChart: hmChartType | null = null
8.   @State Options: ChartOptions = {
9.     grid: {
10.       left: '2%',
11.       right: '2%',
12.       bottom: '4%',
13.       top: "8%",
14.       containLabel: true
15.     },
16.     color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
17.     xAxis: {
18.       type: 'category',
19.       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
20.     },
21.     yAxis: {
22.       type: 'value'
23.     },
24.     tooltip: {
25.       trigger: 'axis'
26.     },
27.     series: [
28.       {
29.         data: [820, 932, 901, 934, 1290, 1330, 1320],
30.         type: 'line',
31.       },
32.       {
33.         data: [1000, 223, 791, 134, 990, 30, 732],
34.         type: 'bar',
35.       }
36.     ]
37.   };
39.   build() {
40.     Column() {
41.       Column() {
42.         hmChart({ Options: this.Options, myChart: this.myChart })
43.       }
44.       .width('98%')
45.       .height('400')
46.     }
47.     .height('100%')
48.     .width('100%')
49.   }
50. }

复制代码

预览效果如下图所示

   其他的配置项与echarts一样适配。均可参考Echarts官网来写。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。