re-chart

A react chart library powered by ECharts.

How to use

``javascript
import { Bar, Pie, Line, Funnel } from 're-chart'

style={{ width: '50%', height: '600px', display: 'inline-block' }}
name="漏斗图"
data={[
{ value: 60, name: '访问' },
{ value: 40, name: '咨询' },
{ value: 20, name: '订单' },
{ value: 80, name: '点击' },
{ value: 100, name: '展现' },
]}
/>

style={{ width: '50%', height: '600px', display: 'inline-block' }}
xList={ ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }
data={[{
name: '邮件营销',
stack: '广告',
data: [120, 132, 101, 134, 90, 230, 210],
}, {
name: '联盟广告',
stack: '广告',
data: [220, 182, 191, 234, 290, 330, 310],
}, {
name: '视频广告',
stack: '广告',
data: [150, 232, 201, 154, 190, 330, 410],
}, {
name: '直接访问',
data: [320, 332, 301, 334, 390, 330, 320],
}, {
name: '搜索引擎',
data: [820, 932, 901, 934, 1290, 1330, 1320],
}]}
/>

style={{ width: '50%', height: '600px', display: 'inline-block' }}
xList={ ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }
data={[{
name: '邮件营销',
data: [120, 132, 101, 134, 90, 230, 210],
}, {
name: '联盟广告',
data: [220, 182, 191, 234, 290, 330, 310],
}, {
name: '视频广告',
data: [150, 232, 201, 154, 190, 330, 410],
}, {
name: '直接访问',
data: [320, 332, 301, 334, 390, 330, 320],
}, {
name: '搜索引擎',
data: [820, 932, 901, 934, 1290, 1330, 1320],
}]}
/>

style={{ width: '50%', height: '600px', display: 'inline-block' }}
name="分布图"
data={[
{ value: 400, name: '搜索引擎' },
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 274, name: '联盟广告' },
{ value: 235, name: '视频广告' },
]}
/>
``