ECharts JSX

A real JSX wrapper for ECharts based on TypeScript

Versions

| SemVer | branch | status | component API | ECharts version | | :----: | :------: | :-----------: | :------------: | :-------------: | | >=1 | main | ✅developing | Web components | >=5 | | <1 | master | 🚧Maintaining | React | >=5 |

Features

• [x] All kinds of options & event handlers can be write in JSX syntax
  • [x] Parallel chart
  • [x] Line chart
  • [x] Scatter chart
  • [x] Bar chart
  • [x] Candle Stick chart
  • [x] Boxplot chart
  • [x] Custom chart
  • [x] Effect Scatter chart
  • [x] Lines chart
  • [x] Map chart
  • [x] Pictorial Bar chart
  • [x] Chord chart
  • [x] Pie chart
  • [x] Radar chart
  • [x] Sunburst chart
  • [x] Gauge chart
  • [x] Tree chart
  • [x] Tree Map chart
  • [x] Sankey chart
  • [x] Heat Map chart
  • [x] Graph chart
  • [x] Funnel chart
  • [x] Theme River chart
• [x] Async-load required modules automatically

Quick start

Installation

npm i echarts-jsx react react-dom

Simple example

Origin: ECharts official example

import { render } from 'react-dom';
import {
    CanvasCharts,
    Title,
    Legend,
    Tooltip,
    XAxis,
    YAxis,
    BarSeries
} from 'echarts-jsx';

render(
    <CanvasCharts theme="dark">
        <Title>ECharts Getting Started Example</Title>

        <Legend data={['sales']} />

        <Tooltip />

        <XAxis
            data={[
                'Shirts',
                'Cardigans',
                'Chiffons',
                'Pants',
                'Heels',
                'Socks'
            ]}
        />
        <YAxis />

        <BarSeries
            name="sales"
            data={[5, 20, 36, 10, 10, 20]}
            onClick={console.log}
        />
    </CanvasCharts>,
    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