echarts-jsx

ECharts JSX

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

Features

• All kinds of options & event handlers can be write in JSX syntax
• Tree shaking supported based on ECMAScript 6+ modules

Versions

SemVer	branch	status	component API	ECharts version
>=1	main	✅developing	Web components	>=5
<1	master	❌deprecated	React	5.x

Installation

Core package

npm i echarts-jsx

View renderer

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

React

React has a property bug of Custom elements, which hasn't been fixed totally: https://github.com/facebook/react/issues/29037#issuecomment-2525290829

Preact

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

npm i dom-renderer@^2

then configure your project as the demo code.

Vue 3

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

Simple example

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
);

Inspired by

• https://recharts.org/
• https://github.com/somonus/react-echarts
• https://github.com/idea2app/ECharts-model
• https://codesandbox.io/s/echarts-react-yoxstm

User cases

• China Open-source Map