{"id":13531767,"url":"https://github.com/idea2app/ECharts-JSX","last_synced_at":"2025-04-01T20:30:31.940Z","repository":{"id":60795387,"uuid":"545079059","full_name":"idea2app/ECharts-JSX","owner":"idea2app","description":"A real JSX wrapper for ECharts based on TypeScript, which makes it much easier to build Visualization apps with React state system.","archived":false,"fork":false,"pushed_at":"2024-07-31T18:46:41.000Z","size":2329,"stargazers_count":27,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-16T02:32:16.108Z","etag":null,"topics":["chart","echarts","jsx","tsx","typescript","wrapper"],"latest_commit_sha":null,"homepage":"https://idea2app.github.io/ECharts-JSX/","language":"TypeScript","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/idea2app.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":"2022-10-03T18:43:46.000Z","updated_at":"2024-09-27T22:00:46.000Z","dependencies_parsed_at":"2024-07-31T22:54:45.616Z","dependency_job_id":null,"html_url":"https://github.com/idea2app/ECharts-JSX","commit_stats":{"total_commits":21,"total_committers":2,"mean_commits":10.5,"dds":0.04761904761904767,"last_synced_commit":"c5087f7dc436345565b53ccbce63dfca0119c122"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idea2app%2FECharts-JSX","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idea2app%2FECharts-JSX/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idea2app%2FECharts-JSX/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idea2app%2FECharts-JSX/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/idea2app","download_url":"https://codeload.github.com/idea2app/ECharts-JSX/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246709921,"owners_count":20821296,"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":["chart","echarts","jsx","tsx","typescript","wrapper"],"created_at":"2024-08-01T07:01:05.488Z","updated_at":"2025-04-01T20:30:31.351Z","avatar_url":"https://github.com/idea2app.png","language":"TypeScript","funding_links":[],"categories":["Frameworks"],"sub_categories":["Web components"],"readme":"# ECharts JSX\n\nA real [JSX][1] wrapper for [ECharts][2] based on [TypeScript][3] \u0026 [Web components][4]\n\n[![NPM Dependency](https://img.shields.io/librariesio/github/idea2app/ECharts-JSX.svg)][5]\n[![CI \u0026 CD](https://github.com/idea2app/ECharts-JSX/actions/workflows/main.yml/badge.svg)][6]\n[![](https://raw.githubusercontent.com/sindresorhus/awesome/main/media/mentioned-badge.svg)][7]\n\n[![NPM](https://nodei.co/npm/echarts-jsx.png?downloads=true\u0026downloadRank=true\u0026stars=true)][8]\n\n## Features\n\n-   [x] All kinds of options \u0026 event handlers can be write in **JSX syntax**\n-   [x] **Tree shaking** supported based on ECMAScript 6+ modules\n\n## Versions\n\n| SemVer |  branch  |    status    | component API  |\n| :----: | :------: | :----------: | :------------: |\n| `\u003e=1`  |  `main`  | ✅developing | Web components |\n|  `\u003c1`  | `master` | ❌deprecated |     React      |\n\n## Installation\n\n### Core package\n\n```shell\nnpm i echarts-jsx\n```\n\n### View renderer\n\nAny kinds of Render engines that you like can be used to render ECharts JSX tags.\n\n#### React 19+\n\nOld versions have a property bug of Custom elements: https://github.com/facebook/react/issues/11347\n\n```shell\nnpm i react@^19 react-dom@^19\n```\n\n#### Preact\n\n```shell\nnpm i preact\n```\n\nthen configure your tool-chain: https://preactjs.com/guide/v10/getting-started#integrating-into-an-existing-pipeline\n\nand write chart codes as this demo: https://idea2app.github.io/React-MobX-Bootstrap-ts/#/chart\n\n#### DOM Renderer v2 \u0026 WebCell v3\n\n```shell\nnpm i dom-renderer@^2\n```\n\nthen configure your project as [the demo code](preview/).\n\n#### Vue 3\n\n```shell\nnpm create vite vue-echarts-app -- --template vue-ts\n```\n\nthen configure your Vite as following code:\n\n```js\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\n\nexport default defineConfig({\n    plugins: [\n        vue({\n            template: {\n                compilerOptions: {\n                    isCustomElement: tag =\u003e tag.startsWith('ec-')\n                }\n            }\n        })\n    ]\n});\n```\n\nand write chart codes as this demo: https://idea2app.github.io/Vue-Prime-ts/#/chart\n\n## Simple example\n\nOrigin: [ECharts official example][9]\n\n[![Edit ECharts-JSX-1.0-demo](https://codesandbox.io/static/img/play-codesandbox.svg)][10]\n\n```tsx\nimport { render } from 'react-dom';\nimport 'echarts-jsx';\n\nrender(\n    \u003cec-svg-renderer theme=\"dark\" style={{ width: '100%', height: '75vh' }}\u003e\n        \u003cec-title text=\"ECharts Getting Started Example\" /\u003e\n\n        \u003cec-legend data={['sales']} /\u003e\n\n        \u003cec-tooltip /\u003e\n\n        \u003cec-x-axis\n            data={[\n                'Shirts',\n                'Cardigans',\n                'Chiffons',\n                'Pants',\n                'Heels',\n                'Socks'\n            ]}\n        /\u003e\n        \u003cec-y-axis /\u003e\n\n        \u003cec-bar-chart\n            name=\"sales\"\n            data={[5, 20, 36, 10, 10, 20]}\n            onClick={console.log}\n        /\u003e\n    \u003c/ec-svg-renderer\u003e,\n    document.body\n);\n```\n\n## Inspired by\n\n1. https://recharts.org/\n2. https://github.com/somonus/react-echarts\n3. https://github.com/idea2app/ECharts-model\n4. https://codesandbox.io/s/echarts-react-yoxstm\n\n## User cases\n\n1. [China Open-source Map](https://kaiyuanshe.cn/organization/)\n\n[1]: https://facebook.github.io/jsx/\n[2]: https://echarts.apache.org/\n[3]: https://www.typescriptlang.org/\n[4]: https://www.webcomponents.org/\n[5]: https://libraries.io/npm/echarts-jsx\n[6]: https://github.com/idea2app/ECharts-JSX/actions/workflows/main.yml\n[7]: https://github.com/ecomfe/awesome-echarts?tab=readme-ov-file#web-components\n[8]: https://nodei.co/npm/echarts-jsx/\n[9]: https://echarts.apache.org/handbook/en/get-started/\n[10]: https://codesandbox.io/p/devbox/echarts-jsx-1-0-demo-h2dz8t?file=%2Fsrc%2FBar.tsx\u0026embed=1\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidea2app%2FECharts-JSX","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fidea2app%2FECharts-JSX","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidea2app%2FECharts-JSX/lists"}