ECharts JSX

ECharts JSX

A real JSX wrapper for ECharts based on TypeScript & Web components

NPM Dependency CI & CD

NPM

  • [x] All kinds of options & event handlers can be write in JSX syntax
  • [x] Tree shaking supported based on ECMAScript 6+ modules
SemVer branch status component API
>=1 main ✅developing Web components
<1 master ❌deprecated React
npm i echarts-jsx

Any kinds of Render engines that you like can be used to render ECharts JSX tags.

Old versions have a property bug of Custom elements: https://github.com/facebook/react/issues/11347

npm i react@^19 react-dom@^19
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

npm i dom-renderer@^2

then configure your project as the demo code.

npm create vite vue-echarts-app -- --template vue-ts

then configure your Vite as following code:

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

Origin: ECharts official example

Edit ECharts-JSX-1.0-demo

import { render } from 'react-dom';
import 'echarts-jsx';

render(
<ec-svg-renderer theme="dark" style={{ width: '100%', height: '75vh' }}>
<ec-title text="ECharts Getting Started Example" />

<ec-legend data={['sales']} />

<ec-tooltip />

<ec-x-axis
data={[
'Shirts',
'Cardigans',
'Chiffons',
'Pants',
'Heels',
'Socks'
]}
/>
<ec-y-axis />

<ec-bar-chart
name="sales"
data={[5, 20, 36, 10, 10, 20]}
onClick={console.log}
/>
</ec-svg-renderer>,
document.body
);
  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
  1. China Open-source Map
""