re-chart

A react chart library powered by ECharts.

How to use

import { Bar, Pie, Line, Funnel } from 're-chart'
 
<Funnel
  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: '展现' },
  ]}
/>
 
<Bar
  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],
  }]}
/>
 
<Line
  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],
  }]}
/>
 
<Pie
  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: '视频广告' },
  ]}
/>