{"id":19978137,"url":"https://github.com/visactor/openharmony-vchart-example","last_synced_at":"2025-07-07T21:02:54.771Z","repository":{"id":243797601,"uuid":"813477057","full_name":"VisActor/openharmony-vchart-example","owner":"VisActor","description":null,"archived":false,"fork":false,"pushed_at":"2024-06-11T06:58:53.000Z","size":422,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-01-12T10:12:24.857Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/VisActor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-11T06:56:14.000Z","updated_at":"2024-06-12T13:03:26.000Z","dependencies_parsed_at":"2024-06-11T08:03:51.497Z","dependency_job_id":"26439acb-544a-4760-ae57-93be43deefeb","html_url":"https://github.com/VisActor/openharmony-vchart-example","commit_stats":null,"previous_names":["visactor/openharmony-vchart-example"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2Fopenharmony-vchart-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2Fopenharmony-vchart-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2Fopenharmony-vchart-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2Fopenharmony-vchart-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VisActor","download_url":"https://codeload.github.com/VisActor/openharmony-vchart-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241411543,"owners_count":19958753,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T03:30:58.639Z","updated_at":"2025-03-01T19:15:37.083Z","avatar_url":"https://github.com/VisActor.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Harmony VChart\n\n- Github仓库地址：https://github.com/VisActor/openharmony-vchart-example/\n- Gitee仓库地址：https://gitee.com/VisActor/openharmony-vchart-example/\n\nOpenHarmony是由开放原子开源基金会（OpenAtom Foundation）孵化及运营的开源项目，目标是面向全场景、全连接、全智能时代，基于开源的方式，搭建一个智能终端设备操作系统的框架和平台，促进万物互联产业的繁荣发展。\n\nVChart 从 1.11.1 版本开始，支持兼容 OpenHarmony 应用开发的图表开发（支持API 10 Release以上），为了方便 OpenHarmony 技术栈的同学更好的使用，我们提供了 VChart 的 OpenHarmony 封装包`@visactor/harmony-vchart`（此包不是 NPM 包，是 OHPM 包），该组件的 spec 配置项与 VChart 一致\n\n我们将在本教程中详细讲解如在 OpenHarmony 项目中使用 VChart，并创建一个简单的柱状图。\n\n## 效果展示\n\n\u003cdiv style=\"text-align: center;\"\u003e\n  \u003cimg style=\"width: 160px; height: 360px;\" crossorigin=\"anonymous\" src=\"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/harmony-vchart-example-dualaxis.png\" alt=\"Harmony VChart示例\"\u003e\n  \u003cimg style=\"width: 160px; height: 360px;\" crossorigin=\"anonymous\" src=\"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/harmony-vchart-example-funnel.png\" alt=\"Harmony VChart示例\"\u003e\n  \u003cimg style=\"width: 160px; height: 360px;\" crossorigin=\"anonymous\" src=\"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/harmony-vchart-example-scatter.png\" alt=\"Harmony VChart示例\"\u003e\n  \u003cimg style=\"width: 160px; height: 360px;\" crossorigin=\"anonymous\" src=\"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/harmony-vchart-example-area.png\" alt=\"Harmony VChart示例\"\u003e\n  \u003cimg style=\"width: 160px; height: 360px;\" crossorigin=\"anonymous\" src=\"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/harmony-vchart-example-ring.png\" alt=\"Harmony VChart示例\"\u003e\n  \u003cimg style=\"width: 160px; height: 360px;\" crossorigin=\"anonymous\" src=\"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/harmony-vchart-example-rose.png\" alt=\"Harmony VChart示例\"\u003e\n  \u003cimg style=\"width: 160px; height: 360px;\" crossorigin=\"anonymous\" src=\"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/harmony-vchart-example-sankey.png\" alt=\"Harmony VChart示例\"\u003e\n  \u003cimg style=\"width: 160px; height: 360px;\" crossorigin=\"anonymous\" src=\"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/harmony-vchart-example-wordcloud.png\" alt=\"Harmony VChart示例\"\u003e\n  \u003cimg crossorigin=\"anonymous\" src=\"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/harmony-vchart-demo-low-quality.gif\" alt=\"Harmony VChart示例\"\u003e\n\u003c/div\u003e\n\n## 快速上手\n\n本文假设用户已了解 OpenHarmony 应用开发流程，具体 OpenHarmony 的相关知识，请参考[OpenHarmony应用开发快速入门](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/start-overview.md)\n\n### 如何安装\n\n要开始使用 Harmony VChart，首先需要在你的 Harmony 项目中安装 `@visactor/harmony-vchart` 包。在项目根目录下，使用以下命令安装该包：\n\n```\nohpm install @visactor/harmony-vchart\n```\n\n### 创建图表\n\n以创建一个简单的状图为例。在你的 Harmony 组件中，引入 `visactor/harmony-vchart` 的 `\u003cVChart\u003e` 组件，并在组件中使用它们。下面是一个创建柱状图的示例代码：\n\n```typescript\nimport { VChart } from '@visactor/harmony-vchart';\n\nconst spec = '{\"type\":\"bar\",\"data\":[{\"id\":\"barData\",\"values\":[{\"type\":\"Autocracies\",\"year\":\"1930\",\"value\":129},{\"type\":\"Autocracies\",\"year\":\"1940\",\"value\":133},{\"type\":\"Autocracies\",\"year\":\"1950\",\"value\":130},{\"type\":\"Autocracies\",\"year\":\"1960\",\"value\":126},{\"type\":\"Autocracies\",\"year\":\"1970\",\"value\":117},{\"type\":\"Autocracies\",\"year\":\"1980\",\"value\":114},{\"type\":\"Autocracies\",\"year\":\"1990\",\"value\":111},{\"type\":\"Autocracies\",\"year\":\"2000\",\"value\":89},{\"type\":\"Autocracies\",\"year\":\"2010\",\"value\":80},{\"type\":\"Autocracies\",\"year\":\"2018\",\"value\":80},{\"type\":\"Democracies\",\"year\":\"1930\",\"value\":22},{\"type\":\"Democracies\",\"year\":\"1940\",\"value\":13},{\"type\":\"Democracies\",\"year\":\"1950\",\"value\":25},{\"type\":\"Democracies\",\"year\":\"1960\",\"value\":29},{\"type\":\"Democracies\",\"year\":\"1970\",\"value\":38},{\"type\":\"Democracies\",\"year\":\"1980\",\"value\":41},{\"type\":\"Democracies\",\"year\":\"1990\",\"value\":57},{\"type\":\"Democracies\",\"year\":\"2000\",\"value\":87},{\"type\":\"Democracies\",\"year\":\"2010\",\"value\":98},{\"type\":\"Democracies\",\"year\":\"2018\",\"value\":99}]}],\"seriesField\":\"type\",\"xField\":[\"year\",\"type\"],\"yField\":\"value\",\"bar\":{\"style\":{\"stroke\":\"#000\",\"lineWidth\":1},\"state\":{\"hover\":{\"stroke\":\"black\"}}},\"legends\":{\"visible\":true,\"position\":\"start\",\"orient\":\"top\"}}'\n\n@Entry\n@Component\nstruct Index {\n@State message: string = 'Hello World';\n\n  build() {\n    Row() {\n      Column() {\n        Text(this.message)\n          .fontSize(50)\n          .fontWeight(FontWeight.Bold)\n        VChart({\n          spec: JSON.parse(spec), w: 300, h: 300,\n          onChartInitCb: () =\u003e {},\n          onChartReadyCb: () =\u003e {}\n        })\n      }\n      .width('100%')\n    }\n    .height('100%')\n  }\n}\n```\n\n在这个示例中，我们创建了一个简单的柱状图，使用了一些基本的组件和配置。\n\n\u003cdiv style=\"text-align: center;\"\u003e\n  \u003cimg src=\"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/350c0511133d336e622523213.png\" alt=\"柱状图示例\"\u003e\n\u003c/div\u003e\n\n## 统一图表标签 `\u003cVChart /\u003e`\n\n`\u003cVChart /\u003e` 接收的一个完整的**spec**作为图表定义，其**spec**的数据结构完全等同于 VChart 中的定义，因此开发者可以将任何对于 VChart 合法的 spec 送入 Harmony-VChart 中进行图表渲染。\n\n### Props\n\n如果你已经有了 spec 图表描述信息，使用统一图表标签是比较快捷的方式，只需要引入`VChart`组件即可：\n\n```typescript\nimport { VChart } from '@visactor/harmony-vchart';\n```\n\n`VChart`组件即封装的 Harmony 组件，其 props 定义如下：\n\n```typescript\ninterface VChartProps extends EventsProps {\n  /** 图表定义 */\n  spec: any;\n  /** 图表配置 */\n  options?: IInitOption;\n  /**\n   * 图表初始化的回调\n   * @param vchart\n   */\n  onChartInitCb?: (vchart: VChartConstructor) =\u003e void;\n  /**\n   * 图表准备好的回调(第一次渲染完成)\n   * @param vchart\n   */\n  onChartReadyCb?: (vchart: VChartConstructor) =\u003e void;\n  /** throw error when chart run into an error */\n  onError?: (err: Error) =\u003e void;\n  /**\n   * 切换到同步渲染\n   *\n   * @since 1.8.3\n   **/\n  useSyncRender?: boolean;\n  /**\n   * props更新的时候，跳过所有函数的检查，即所有的函数都认为没有更新\n   *\n   * @since 1.6.5\n   **/\n  skipFunctionDiff?: boolean;\n}\n```\n\n```typescript\nexport interface IInitOption {\n  /**\n   * 图表开始渲染的回调\n   * @param vchart\n   */\n  beforeRender?: (stage: Object) =\u003e void;\n  /**\n   * 渲染完成的回调\n   * @param vchart\n   */\n  afterRender?: (stage: Object) =\u003e void;\n  /**\n   * 启用的插件列表\n   */\n  pluginList?: string[];\n  /** 数据集 */\n  dataSet?: Object;\n  /**\n   * 是否开启动画\n   */\n  animation?: boolean;\n  /**\n   * 当文本省略时，鼠标 hover 到文本上时是否显示 poptip\n   * @default true\n   */\n  poptip?: boolean;\n\n  /**\n   * 报错的回调函数\n   * @since 1.2.0\n   */\n  onError?: () =\u003e void;\n\n  /**\n   * 默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）\n   * @since 1.3.0\n   */\n  theme?: string;\n}\n```\n\n`EventsProps` 的定义参考事件交互章节\n\n`onChartReadyCb`是一个内置的回调事件，会在图表渲染或更新时触发，其入参分别代表图表实例对象，以及是否初次渲染。\n\n举例来说，开发者可以在初次渲染时，将需要触发的回调事件注册在图表实例上以实现图表交互功能。\n\n## 事件交互\n\n### 基础事件\n\n统一图表标签（VChart）是最外层图表组件，其 Props 上都支持底层渲染层抛出的场景树事件`EventsProps`。\n\n`EventsProps`的定义如下：\n\n```typescript\ninterface EventsProps {\n  onPointerDown?: (e: any) =\u003e void | boolean;\n  onPointerUp?: (e: any) =\u003e void | boolean;\n  onPointerUpOutside?: (e: any) =\u003e void | boolean;\n  onPointerTap?: (e: any) =\u003e void | boolean;\n  onPointerOver?: (e: any) =\u003e void | boolean;\n  onPointerMove?: (e: any) =\u003e void | boolean;\n  onPointerEnter?: (e: any) =\u003e void | boolean;\n  onPointerLeave?: (e: any) =\u003e void | boolean;\n  onPointerOut?: (e: any) =\u003e void | boolean;\n  onMouseDown?: (e: any) =\u003e void | boolean;\n  onMouseUp?: (e: any) =\u003e void | boolean;\n  onMouseUpOutside?: (e: any) =\u003e void | boolean;\n  onMouseMove?: (e: any) =\u003e void | boolean;\n  onMouseOver?: (e: any) =\u003e void | boolean;\n  onMouseOut?: (e: any) =\u003e void | boolean;\n  onMouseEnter?: (e: any) =\u003e void | boolean;\n  onMouseLeave?: (e: any) =\u003e void | boolean;\n  onPinch?: (e: any) =\u003e void | boolean;\n  onPinchStart?: (e: any) =\u003e void | boolean;\n  onPinchEnd?: (e: any) =\u003e void | boolean;\n  onPan?: (e: any) =\u003e void | boolean;\n  onPanStart?: (e: any) =\u003e void | boolean;\n  onPanEnd?: (e: any) =\u003e void | boolean;\n  onDrag?: (e: any) =\u003e void | boolean;\n  onDragStart?: (e: any) =\u003e void | boolean;\n  onDragEnter?: (e: any) =\u003e void | boolean;\n  onDragLeave?: (e: any) =\u003e void | boolean;\n  onDragOver?: (e: any) =\u003e void | boolean;\n  onDragEnd?: (e: any) =\u003e void | boolean;\n  onRightDown?: (e: any) =\u003e void | boolean;\n  onRightUp?: (e: any) =\u003e void | boolean;\n  onRightUpOutside?: (e: any) =\u003e void | boolean;\n  onTouchStart?: (e: any) =\u003e void | boolean;\n  onTouchEnd?: (e: any) =\u003e void | boolean;\n  onTouchEndOutside?: (e: any) =\u003e void | boolean;\n  onTouchMove?: (e: any) =\u003e void | boolean;\n  onTouchCancel?: (e: any) =\u003e void | boolean;\n  onPress?: (e: any) =\u003e void | boolean;\n  onPressUp?: (e: any) =\u003e void | boolean;\n  onPressEnd?: (e: any) =\u003e void | boolean;\n  onSwipe?: (e: any) =\u003e void | boolean;\n  onDrop?: (e: any) =\u003e void | boolean;\n  onWeel?: (e: any) =\u003e void | boolean;\n  onClick?: (e: any) =\u003e void | boolean;\n  onDblClick?: (e: any) =\u003e void | boolean;\n}\n```\n\n## 总结\n\n通过本教程，你应该已经学会了如何在 OpenHarmony 项目中使用 VChart 图表创建一个简单的柱状图。同时，你还了解了如何根据需求配置图表，以满足项目中不同的场景。VChart 提供了丰富的配置选项和组件，相信你在实际项目中会更好地掌握它们的使用，并发挥出更大的作用。希望你能在项目中愉快地使用 VChart 表库！\n\n## 🔗 相关链接\n\n- [Homepage](https://www.visactor.io/vchart)\n- [VCharts Gallery](https://www.visactor.io/vchart/example)\n- [VChart Tutorials](https://www.visactor.io/vchart/guide/tutorial_docs/VChart_Website_Guide)\n- [VChart Options](https://www.visactor.io/vchart/option/)\n- [VChart API](https://www.visactor.io/vchart/api/API/vchart)\n- [VGrammar](https://www.visactor.io/vgrammar)\n- [VRender](https://www.visactor.io/vrender)\n- [FAQ](https://www.visactor.io/vchart/guide/tutorial_docs/FAQ)\n- [CodeSandbox Template](https://codesandbox.io/s/the-template-of-visactor-vchart-vl84ww?file=/src/index.ts) for bug reports\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisactor%2Fopenharmony-vchart-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvisactor%2Fopenharmony-vchart-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisactor%2Fopenharmony-vchart-example/lists"}