edgarberm/ECharts-JSX

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

ECharts JSX

A real JSX wrapper for ECharts based on TypeScript

Features

• All kinds of options can be write in JSX syntax
  • Parallel chart
  • Line chart
  • Scatter chart
  • Bar chart
  • Candle Stick chart
  • Pie chart
  • Radar chart
  • Sunburst chart
  • Gauge chart
  • Tree chart
  • Tree Map chart
  • Sankey chart
  • Heat Map chart
  • Graph chart
  • Funnel chart
  • Theme River chart
• 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>
        <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]} />
    </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