leungwensen / d2recharts

data driven react components of echarts

Home Page:https://leungwensen.github.io/d2recharts/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

d2recharts

Data Driven echarts wrapped as react components.

what?

data-flow

Why?

To make the path from data to chart shorter.

Install

npm i d2recharts --save

Usage

A typical use case is like:

<D2Pie
    data={[
       {value:335, name:'直接访问'},
       {value:310, name:'邮件营销'},
       {value:234, name:'联盟广告'},
       {value:135, name:'视频广告'},
       {value:1548, name:'搜索引擎'}
    ]}
/>

Simplest use case:

const data = [
    // data goes here
];
<D2RechartsSmart data={data} />

If you want fully functionality of echarts:

const option = {
    // echarts option goes here
};
<D2Recharts option={option} />

Thanks to

  • echarts: one of the greatest open source project for graphing.
  • echarts-for-react: where the core react wrapping is stolen from.

About

data driven react components of echarts

https://leungwensen.github.io/d2recharts/

License:MIT License


Languages

Language:JavaScript 88.7%Language:HTML 8.9%Language:CSS 2.4%