{
  "markdown": "<div align=\"center\">\n  <a href=\"https://github.com/VisActor#gh-light-mode-only\" target=\"_blank\">\n    <img alt=\"VisActor Logo\" width=\"200\" src=\"https://github.com/VisActor/.github/blob/main/profile/logo_500_200_light.svg\"/>\n  </a>\n  <a href=\"https://github.com/VisActor#gh-dark-mode-only\" target=\"_blank\">\n    <img alt=\"VisActor Logo\" width=\"200\" src=\"https://github.com/VisActor/.github/blob/main/profile/logo_500_200_dark.svg\"/>\n  </a>\n</div>\n\n<div align=\"center\">\n  <h1>VChart</h1>\n</div>\n\n<div align=\"center\">\n\nVChart, more than just a cross-platform charting library, but also an expressive data storyteller.\n\n<p align=\"center\">\n  <a href=\"https://www.visactor.io/vchart\">Introduction</a> •\n  <a href=\"https://www.visactor.io/vchart/example\">Demo</a> •\n  <a href=\"https://www.visactor.io/vchart/guide/tutorial_docs/VChart_Website_Guide\">Tutorial</a> •\n  <a href=\"https://www.visactor.io/vchart/option/barChart\">API</a>•\n  <a href=\"https://www.visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/node\">Cross-Platform</a>\n</p>\n\n![](https://github.com/visactor/vchart/actions/workflows/bug-server.yml/badge.svg)\n![](https://github.com/visactor/vchart/actions/workflows/unit-test.yml/badge.svg)\n[![npm Version](https://img.shields.io/npm/v/@visactor/vchart.svg)](https://www.npmjs.com/package/@visactor/vchart)\n[![npm Download](https://img.shields.io/npm/dm/@visactor/vchart.svg)](https://www.npmjs.com/package/@visactor/vchart)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/VisActor/VChart/blob/main/CONTRIBUTING.md#your-first-pull-request)\n\n![](https://img.shields.io/badge/language-TypeScript-red.svg) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vchart/blob/main/LICENSE)\n\n</div>\n\n<div align=\"center\">\n\nEnglish | [简体中文](./README.zh-CN.md) | [日本語](./README.ja-JP.md)\n\n</div>\n\n<div align=\"center\">\n\n（video）\n\n</div>\n\n## Introduction\n\nVChart is a charting component library in VisActor visualization system. It wraps the charting logic based on visual grammar library [VGrammar](https://github.com/VisActor/VGrammar) and the component encapsulation based on visual rendering engine [VRender](https://github.com/VisActor/VRender). The core capabilities are as follows:\n\n1. **Cross-platform**: Automatically adapt to desktop, H5, and multiple small program environments\n2. **Storytelling**: Comprehensive annotation, animation, flow control, narrative templates, and other enhanced features for visual storytelling\n3. **Scenes**: Deliver visual storytelling capabilities to end-users, unlock developer productivity\n\n### Repository Introduction\n\nThis repository includes the following packages:\n\n1. [`vchart`](./packages/vchart/): The core code repository of VChart\n2. [`react-vchart`](./packages/react-vchart/): The VChart component encapsulated based on [React](https://react.dev/)\n3. [`taro-vchart`](./packages/taro-vchart/): The VChart component encapsulated based on [Taro](https://docs.taro.zone/docs/)\n4. [`lark-vchart`](./packages/lark-vchart/): The VChart component encapsulated based on [Lark miniAPP](https://open.feishu.cn/document/client-docs/gadget/introduction/host-environment)\n5. [`block-vchart`](./packages/block-vchart/): The VChart component encapsulated based on [Lark Block](https://open.feishu.cn/document/client-docs/block/block-introduction)\n6. [`wx-vchart`](./packages/wx-vchart/)：The VChart component encapsulated based on [Wx miniAPP](https://developers.weixin.qq.com/miniprogram/dev/framework/)\n7. [`docs`](./docs/): VChart site source code, and also contains all Chinese and English documents, chart sample codes, etc. of the site.\n\n## 🔨 Usage\n\n### 📦 Installation\n\n```bash\n# npm\n$ npm install @visactor/vchart\n\n# yarn\n$ yarn add @visactor/vchart\n```\n\n### 📊 A Chart Example\n\n<img src=\"https://user-images.githubusercontent.com/135952300/246996854-95cf0db3-42a2-41f9-8f15-8b7bbec1794c.png\" style=\"width: 500px\">\n\n```typescript\nimport VChart from '@visactor/vchart';\n\nconst spec = {\n  type: 'bar',\n  data: [\n    {\n      id: 'barData',\n      values: [\n        { month: 'Monday', sales: 22 },\n        { month: 'Tuesday', sales: 13 },\n        { month: 'Wednesday', sales: 25 },\n        { month: 'Thursday', sales: 29 },\n        { month: 'Friday', sales: 38 }\n      ]\n    }\n  ],\n  xField: 'month',\n  yField: 'sales',\n  crosshair: {\n    xField: { visible: true }\n  }\n};\n\n// 'chart' is the id of your dom container, such as <div id=\"chart\"></chart>\nconst vchart = new VChart(spec, { dom: 'chart' });\nvchart.renderAsync();\n```\n\n## ⌨️ Development\n\nFirst of all, please install [@microsoft/rush](https://rushjs.io/pages/intro/get_started/)\n\n```bash\n$ npm i --global @microsoft/rush\n```\n\nThen clone locally:\n\n```bash\n# clone\n$ git clone git@github.com:VisActor/VChart.git\n$ cd VChart\n# install dependencies\n$ rush update\n# start vchart development server\n$ rush start\n# start react-vchart development server\n$ rush react\n# start site development server\n$ rush docs\n```\n# 📖 Documents\n\nAfter installation & clone & update, run docs to preview VTable documents locally.\n\n```bash\n# start vtable document server. execute in file path: ./\n$ rush update\n$ rush build\n$ rush docs\n```\n# If you meet dependency problems\n```bash\n$ rush purge\n$ rush update\n```\n\n## 🔗 Related Links\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/faq/)\n- [CodeSandbox Template](https://codesandbox.io/s/the-template-of-visactor-vchart-vl84ww?file=/src/index.ts) for bug reports\n\n## 💫 Ecosystem\n\n| Project                                                                                                          | Description                                                                                                                 |\n| ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| [React-VChart](https://github.com/VisActor/VChart/tree/develop/packages/react-vchart)                            | React interface for @VisActor/VChart                                                                                        |\n| [OpenInula-VChart](https://www.visactor.io/vchart/example-openinula)                                             | OpenInula VChart Components                                                                                                 |\n| [OMI](https://omi.cdn-go.cn/home/latest)                                                                         | Web Components Framework                                                                                                    |\n| [A vercel template built with vchart and Next.js](https://vercel.com/templates/next.js/visactor-nextjs-template) | A modern dashboard template built with vchart and Next.js, featuring a beautiful UI and rich data visualization components. |\n\n## Star History\n\n<a href=\"https://gitdata.xuanhun520.com/#visactor/vchart&Date\">\n<picture >\n\n  <img style=\"width: 800px; height: 533px;\" alt=\"Star History Chart\" src=\"https://gitdata.xuanhun520.com/api/starimg?repos=visactor/vchart&type=Date&theme=dark\" />\n</picture>\n</a>\n\n\n\n## 💖 Thanks\n\n<div>\n  <a href=\"https://semi.design/#gh-dark-mode-only\" target=\"_blank\">\n    <img alt=\"VisActor Logo\" height=\"60\" src=\"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/visactor/semi-dark.svg\"/>\n  </a>\n  <a href=\"https://semi.design/#gh-light-mode-only\" target=\"_blank\">\n    <img alt=\"VisActor Logo\" height=\"60\" src=\"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/visactor/semi.svg\"/>\n  </a>\n</div>\n\nThanks to [Semi](https://semi.design/) for providing the theme visualization customization solution.\n\n## 🤝 Contribution [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/VisActor/VChart/blob/main/CONTRIBUTING.md#your-first-pull-request)\n\nIf you would like to contribute, please read the [Code of Conduct](./CODE_OF_CONDUCT.md) and our [contributing guide](./CONTRIBUTING.md) first。\n\nSmall streams converge to make great rivers and seas!\n\n<a href=\"https://github.com/visactor/vchart/graphs/contributors\"><img src=\"https://contrib.rocks/image?repo=visactor/vchart\" /></a>\n",
  "bytes": 8680,
  "sha": "e936342b1cb0ef5bb77520e7ea54fcd155ccee0e6c8a23670c66abc19e2e5abb",
  "repo_slug": "visactor/vchart",
  "fonte": "repo",
  "truncated": false,
  "api": "https://api.agentalog.com/api/listings/skl_visactor_vchart_vchart_development_assis_0d87ef24/readme"
}