Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/idea2app/ECharts-JSX
A real JSX wrapper for ECharts based on TypeScript, which makes it much easier to build Visualization apps with React state system.
https://github.com/idea2app/ECharts-JSX
chart echarts jsx tsx typescript wrapper
Last synced: 3 days ago
JSON representation
A real JSX wrapper for ECharts based on TypeScript, which makes it much easier to build Visualization apps with React state system.
- Host: GitHub
- URL: https://github.com/idea2app/ECharts-JSX
- Owner: idea2app
- Created: 2022-10-03T18:43:46.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-31T18:46:41.000Z (3 months ago)
- Last Synced: 2024-10-16T02:32:16.108Z (20 days ago)
- Topics: chart, echarts, jsx, tsx, typescript, wrapper
- Language: TypeScript
- Homepage: https://idea2app.github.io/ECharts-JSX/
- Size: 2.22 MB
- Stars: 27
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: ReadMe.md
Awesome Lists containing this project
- awesome-echarts - ECharts-JSX - A real JSX wrapper for Apache ECharts based on TypeScript & Web components. (Frameworks / Web components)
README
# ECharts JSX
A real [JSX][1] wrapper for [ECharts][2] based on [TypeScript][3] & [Web components][4]
[][5]
[][6]
[][7]
[][8]
## Features
- [x] All kinds of options & event handlers can be write in **JSX syntax**
- [x] **Tree shaking** supported based on ECMAScript 6+ modules
## Versions
| SemVer | branch | status | component API |
| :----: | :------: | :----------: | :------------: |
| `>=1` | `main` | ✅developing | Web components |
| `<1` | `master` | ❌deprecated | React |
## Installation
### Core package
```shell
npm i echarts-jsx
```
### View renderer
Any kinds of Render engines that you like can be used to render ECharts JSX tags.
#### React 19+
Old versions have a property bug of Custom elements: https://github.com/facebook/react/issues/11347
```shell
npm i react@^19 react-dom@^19
```
#### Preact
```shell
npm i preact
```
then configure your tool-chain: https://preactjs.com/guide/v10/getting-started#integrating-into-an-existing-pipeline
and write chart codes as this demo: https://idea2app.github.io/React-MobX-Bootstrap-ts/#/chart
#### DOM Renderer v2 & WebCell v3
```shell
npm i dom-renderer@^2
```
then configure your project as [the demo code](preview/).
#### Vue 3
```shell
npm create vite vue-echarts-app -- --template vue-ts
```
then configure your Vite as following code:
```js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: tag => tag.startsWith('ec-')
}
}
})
]
});
```
and write chart codes as this demo: https://idea2app.github.io/Vue-Prime-ts/#/chart
## Simple example
Origin: [ECharts official example][9]
[][10]
```tsx
import { render } from 'react-dom';
import 'echarts-jsx';
render(
,
document.body
);
```
## Inspired by
1. https://recharts.org/
2. https://github.com/somonus/react-echarts
3. https://github.com/idea2app/ECharts-model
4. https://codesandbox.io/s/echarts-react-yoxstm
## User cases
1. [China Open-source Map](https://kaiyuanshe.cn/organization/)
[1]: https://facebook.github.io/jsx/
[2]: https://echarts.apache.org/
[3]: https://www.typescriptlang.org/
[4]: https://www.webcomponents.org/
[5]: https://libraries.io/npm/echarts-jsx
[6]: https://github.com/idea2app/ECharts-JSX/actions/workflows/main.yml
[7]: https://github.com/ecomfe/awesome-echarts?tab=readme-ov-file#web-components
[8]: https://nodei.co/npm/echarts-jsx/
[9]: https://echarts.apache.org/handbook/en/get-started/
[10]: https://codesandbox.io/p/devbox/echarts-jsx-1-0-demo-h2dz8t?file=%2Fsrc%2FBar.tsx&embed=1