A real JSX wrapper for ECharts based on TypeScript & Web components
- [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-jsxAny 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@^19npm i preactthen 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@^2then configure your project as the demo code.
npm create vite vue-echarts-app -- --template vue-tsthen 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
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
);