A real JSX wrapper for ECharts based on TypeScript
- 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
npm i echarts-jsx react react-domOrigin: 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
);