鸿蒙5.0开发【 基于（Echarts）开发一个OpenHarmony三方库】

准备工作

• 安装好最新[DevEco Studio] 开发工具,创建一个新的空项目。
• 在 [OpenHarmony三方库中心仓]注册账号。
• 在[百度Echarts官网定制化下载]需要的组件,注意不要勾选代码压缩选项，方便我们后面调试。

创建引入Static Library模块

1.创建 Static Library 模块。

这里需要注意是要鼠标移动到项目名称目录上，然后右键 创建新模块，然后选 Static Library 静态模块，模块名称命名自己可以随意,我这里用的是hm_chart。

创建好模块之后的目录结构大致是这样的。

2.在我们项目中引入 Static Library 模块。

• 在项目 oh-package.json5 dependencies 中加载Static Library 模块文件，这里需要注意我们加了一个前缀@wuyan/ 这里可以加也不可以加，但是如果加了的化要记住名称，我们后面有用到。

{
  "name": "entry",
  "version": "1.0.0",
  "description": "Please describe the basic information.",
  "main": "",
  "author": "",
  "license": "",
  "dependencies": {
    "@wuyan/hm_chart": "file:../hm_chart"
  }
}

• 打开终端 执行 ohpm install 命令。

• 在项目首页 src/main/ets/pages/Index.ets 文件中删掉之前没有用的代码引入模块。

import  {MainPage} from  "@wuyan/hm_chart"

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {
      MainPage();
    }
    .height('100%')
    .width('100%')
  }
}

打开右侧预览器 就可以看到如下页面。

封装Echarts 插件

1.将从Echarts 官网定制化界面下载好的 echarts.js文件放入到 hm_chart 模块中 /src/main/ets/components 目录下面

2.新建 InitCharts.js 文件 放在和 echarts.js 同目录下面。

import * as echarts from './echarts';

export  class  InitCharts{
    constructor(ctx) {
     this.myChart = echarts.init(ctx); //初始化
    }
    // 绘制图表
    setOption(option){
        this.myChart.setOption(option)
    }
}

3.修改 MainPage.ets 文件绘制 [canvas] 并new InitCharts 初始化 eCharts。

import  {InitCharts} from "./InitCharts"

@Component
export struct MainPage {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
      Column() {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .onReady(() => {
            const myChart = new InitCharts(this.context)
          })
      }
  }
}

让我们点击预览看看效果如何。好吧不出意外的报错了。

4.打开 echarts.js 文件 全局搜索 this.dom.getContext('2d') 找到这行代码 去掉this.dom后面的.getContext('2d')

再试试预览效果，没报错了，离成功就很近了。

5.让我们来试一试 setOption 方法，官网上随便找了一段 option 配置，修改MainPage.ets 文件 加入 setOption 方法。

import  {InitCharts} from "./InitCharts"

@Component
export struct MainPage {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
      Column() {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .onReady(() => {
            const myChart = new InitCharts(this.context) //初始化
            // 渲染图表
            myChart.setOption({
              title: {
                text: 'Stacked Line'
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  name: 'Email',
                  type: 'line',
                  stack: 'Total',
                  data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                  name: 'Union Ads',
                  type: 'line',
                  stack: 'Total',
                  data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                  name: 'Video Ads',
                  type: 'line',
                  stack: 'Total',
                  data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                  name: 'Direct',
                  type: 'line',
                  stack: 'Total',
                  data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                  name: 'Search Engine',
                  type: 'line',
                  stack: 'Total',
                  data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
              ]
            })
          })
      }
  }
}

非常完美，图表加载成功！

让我来点下看看，额… tooltip legend 的事件都相应丢失了，看看源码是怎么个回事呢？ 原来是Echarts 底层用的 addEventListener 监听的事件，但是 HarmonyOS NEXT 是没有这个方法的。

网上找资料肯定是找不到了，看看Echarts官网有没有解决方案,终于我看到了 [跨平台方案]里面有个微信适配,因为其实微信也是没有相关dom 的 addEventListener 事件的。从官网[echarts-for-weixin]链接点过去找到了[wx-canvas.js] 果然有适配方案。

6.参照官网的思路，改造一下我们的 InitCharts.js 和 MainPage.ets

InitCharts.js 代码如下 添加了 onTouchEvent 绑定事件

import * as echarts from './echarts';

export  class  InitCharts{
    constructor(ctx) {
     this.myChart = echarts.init(ctx); //初始化
    }
    // 绘制图表
    setOption(option){
        this.myChart.setOption(option)
    }
    // 注册触摸事件
    onTouchEvent(event){
        const eventNames = [{
            type: '0',
            ecName: 'mousedown' //鼠标按下
        }, {
            type: '2',
            ecName: 'mousemove' //鼠标移动
        }, {
            type: '1',
            ecName: 'mouseup' // 鼠标离开
        }, {
            type: '1',
            ecName: 'click'
        }];
        eventNames.forEach(item => {
            if(event.type==item.type){
                const touch = event.touches[0];
                this.myChart.getZr().handler.dispatch(item.ecName, {
                    zrX: touch.x,
                    zrY: touch.y,
                    preventDefault: () => {},
                    stopImmediatePropagation: () => {},
                    stopPropagation: () => {}
                });
            }
        });
    }


}

MainPage.ets 代码如下 添加了 onTouch 事件

import  {InitCharts} from "./InitCharts"

@Component
export struct MainPage {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private  myChart:InitCharts|null = null

  build() {
      Column() {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .onReady(() => {
            this.myChart = new InitCharts(this.context)
            this.myChart.setOption({
              title: {
                text: 'Stacked Line'
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  name: 'Email',
                  type: 'line',
                  stack: 'Total',
                  data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                  name: 'Union Ads',
                  type: 'line',
                  stack: 'Total',
                  data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                  name: 'Video Ads',
                  type: 'line',
                  stack: 'Total',
                  data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                  name: 'Direct',
                  type: 'line',
                  stack: 'Total',
                  data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                  name: 'Search Engine',
                  type: 'line',
                  stack: 'Total',
                  data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
              ]
            })
          })
          .onTouch((event: TouchEvent)=>{
            if(this.myChart){
              this.myChart.onTouchEvent(event)
            }
          })

      }
  }
}

看看效果 legend 事件生效了， 但是 tooltip 还是没有反应。

经过分析发现是 echarts.js 源码中 Env 环境判断错误 导致识别成 node 服务器环境了。

7.打开 echarts.js 源码 搜索 new Env() 注释掉 env.node = true; env.svgSupported = true; 搜索 addEventListener 注释掉 el.addEventListener(name, handler, opt);el.removeEventListener(name, handler, opt);

最后再预览一下 看看效果。

打包发布插件

• 1. 因为本文用到了插件前缀 @wuyan,如果你也有想要有前缀，那需要去[OpenHarmony三方库中心仓] 组织管理中添加组织,我这里添加的是wuyan。
• 2. 配置 oh-package.json5 内容,具体配置可以参考官网[模块级oh-package.json5字段说明] 我的 oh-package.json5 配置如下

{
  "name": "@wuyan/hm_chart",
  "version": "1.0.0",
  "keywords":["chart","echarts","hm_chart"],
  "description": "一个基于echarts 进行二次封装的插件,基本上完全支持echarts 的所有功能。",
  "main": "Index.ets",
  "author": "wuyan",
  "license": "Apache-2.0",
  ohos: {
    org: 'wuyan',
  },
  "dependencies": {}
}

• 打开命令生成OHPM 公钥

说明 官方是 ~/.ssh_ohpm/mykey 我觉得反而不好理解,我这里直接用mykey 就是私钥的名称。 需要注意的是必须输入密码，这样在后续发布HAR包的时候有用到。

ssh-keygen -m PEM -t RSA -b 4096 -f mykey 

执行成功后

• 将公钥文件（mykey.pub）添加至[OpenHarmony三方库中心仓【认证管理】]中。

• 将私钥文件路径配置到 .ohpmrc 文件中 key_path 字段上

需要注意的是用系统自带的窗口执行可能会报错 ohpm 无法识别,所以推荐直接用我们开发工具的终端执行命令,后续发布HAR 包也是一样。

ohpm config set key_path E:\work\test\MyApplication\mykey

• 配置登录用户发布码，需要把your-publishId 替换成你自己的发布码，位置在[OpenHarmony三方库中心仓【个人中心】]页面左边个人信息下，直接点复制发布码即可拿到。

ohpm config set publish_id your-publishId

• 在我们之前创建的静态模块跟目录下创建 README.md(描述信息)，CHANGELOG.md(更新日志) 和 LICENSE(开源协议license) 四个文件，若文件缺失，内容缺少，内容必须真实，会导致上架至中心仓失败（有人工审核）。

• 对开发后的库模块打成 HAR 包、发布HAR包。 打包
  发布包 <HAR路径> 等于你包文件的实际路径 我这里是 E:\work\test\MyApplication\hm_chart\build\default\outputs\default\hm_chart.har自己要根据自己实际项目情况修改。

ohpm publish <HAR路径>

详细教程可以参考官网帮助文档 里面介绍非常详细 [认证管理] 和[贡献三方库]

总结

本篇文章详细介绍了如何创建一个 OpenHarmony三方库 , 以及如何对Echarts 进行封装，在封装过程中出现的错误，进行思考调整，希望对你们后面创建自己的 OpenHarmony三方库 有所帮助。

创作不易，觉得本篇文章不错的留下一个赞呗。

问题更新

经过掘友@lwlizhe 提醒在模拟器上会报错global is not defined,我的处理方案是在var root =这行代码前面加上global定义var global={}即可解决问题。

​
最后呢，很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

​​​​

高清完整版请点击→《鸿蒙NEXT星河版开发学习文档》

针对鸿蒙成长路线打造的鸿蒙学习文档。话不多说，我们直接看详细资料鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，帮助大家在技术的道路上更进一步。

《鸿蒙 (OpenHarmony)开发学习视频》

《鸿蒙生态应用开发V2.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》

《鸿蒙开发基础》

《鸿蒙开发进阶》

《鸿蒙开发实战》

获取这份鸿蒙星河版学习资料，请点击→《鸿蒙NEXT星河版开发学习文档》

总结

鸿蒙—作为国家主力推送的国产操作系统。部分的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。

并且鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，未来将会支持 50 万款的应用。那么这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！