Skip to content

A real JSX wrapper for ECharts based on TypeScript, which makes it much easier to build Visualization apps with React state system.

Notifications You must be signed in to change notification settings

idea2app/ECharts-JSX

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ECharts JSX

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

NPM Dependency CI & CD

NPM

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
>=1 main ✅developing Web components
<1 master ❌deprecated React

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 19+

Old versions have a property bug of Custom elements: facebook/react#11347

npm i react@^19 react-dom@^19

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

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

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