UNPKG

4.82 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5<meta http-equiv="Content-Type" name="viewport" content="width=device-width, initial-scale=1"/>
6<title>d2recharts</title>
7<link rel="stylesheet" href="https://leungwensen.github.io/zfinder/dist/lib/normalize-4.2.0.min.css">
8
9 <link rel="stylesheet" href="https://leungwensen.github.io/zfinder/dist/lib/github-markdown-2.3.0.min.css">
10 <link rel="stylesheet" href="https://leungwensen.github.io/zfinder/dist/zfinder/markdown-previewer.css">
11</head>
12<body>
13<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
14 style="width:0;height:0;position:absolute;overflow:hidden;">
15 <defs>
16 <symbol id="si-zfinder-collapse-left" viewBox="0 0 38 38">
17 <path d="M38 0H0v38h38V0zM3 35V3h32v32H3zM5 5v28h17V21h-9.667L16 26h-4l-5-7 5-7h4l-3.667 5H22V5H5z"/>
18 </symbol>
19 <symbol id="si-zfinder-expand-right" viewBox="0 0 38 38">
20 <path d="M0 0h38v38H0V0zm35 35V3H3v32h32zM22 5v28H5V21h9.667L11 26h4l5-7-5-7h-4l3.667 5H5V5h17z"/>
21 </symbol>
22 <symbol id="si-zfinder-fullscreen" viewBox="0 0 28 28">
23 <path d="M4 18H0v10h10v-4H4v-6zm-4-8h4V4h6V0H0v10zm24 14h-6v4h10V18h-4v6zM18 0v4h6v6h4V0H18z"/>
24 </symbol>
25 <symbol id="si-zfinder-fullscreen-exit" viewBox="0 0 28 28">
26 <path d="M0 22h6v6h4V18H0v4zM6 6H0v4h10V0H6v6zm12 22h4v-6h6v-4H18v10zm4-22V0h-4v10h10V6h-6z"/>
27 </symbol>
28 </defs>
29</svg>
30<nav id="toc">
31 <div id="toc-body" class="toc-body"></div>
32</nav>
33<article id="markdown">
34 <nav id="markdown-header" class="markdown-header">
35 <svg class="si" id="toggle-toc" width="24" height="24">
36 <use xlink:href="#si-zfinder-collapse-left"></use>
37 </svg>
38 <svg class="si float-right" id="toggle-fullscreen-article" width="24" height="24">
39 <use xlink:href="#si-zfinder-fullscreen"></use>
40 </svg>
41 </nav>
42 <div id="markdown-body" class="markdown-body"><h1>d2recharts</h1>
43<p><strong>Data Driven</strong> echarts wrapped as react components.</p>
44<h2>what?</h2>
45<figure><img src="doc/data-flow.png" alt="data-flow"></figure>
46<h2>Why?</h2>
47<p>To make the path from data to chart shorter.</p>
48<h2>Install</h2>
49<pre><code class="language-shell">npm i d2recharts --save
50</code></pre>
51<h2>Usage</h2>
52<p>A typical use case is like:</p>
53<pre><code class="language-jsx">&lt;D2Pie
54 name=<span class="hljs-string">"访问来源"</span>
55 tooltip=<span class="hljs-string">"true"</span>
56 legend=<span class="hljs-string">"true"</span>
57 data={[
58 {<span class="hljs-attr">value</span>:<span class="hljs-number">335</span>, <span class="hljs-attr">name</span>:<span class="hljs-string">'直接访问'</span>},
59 {<span class="hljs-attr">value</span>:<span class="hljs-number">310</span>, <span class="hljs-attr">name</span>:<span class="hljs-string">'邮件营销'</span>},
60 {<span class="hljs-attr">value</span>:<span class="hljs-number">234</span>, <span class="hljs-attr">name</span>:<span class="hljs-string">'联盟广告'</span>},
61 {<span class="hljs-attr">value</span>:<span class="hljs-number">135</span>, <span class="hljs-attr">name</span>:<span class="hljs-string">'视频广告'</span>},
62 {<span class="hljs-attr">value</span>:<span class="hljs-number">1548</span>, <span class="hljs-attr">name</span>:<span class="hljs-string">'搜索引擎'</span>}
63 ]}
64/&gt;
65</code></pre>
66<p>Simplest use case:</p>
67<pre><code class="language-jsx"><span class="hljs-keyword">const</span> data = [
68 <span class="hljs-comment">// data goes here</span>
69];
70<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">D2RechartsSmart</span> <span class="hljs-attr">data</span>=<span class="hljs-string">{data}</span> /&gt;</span>
71</span></code></pre>
72<p>If you want fully functionality of echarts:</p>
73<pre><code class="language-jsx"><span class="hljs-keyword">const</span> option = {
74 <span class="hljs-comment">// echarts option goes here</span>
75};
76<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">D2Recharts</span> <span class="hljs-attr">option</span>=<span class="hljs-string">{option}</span> /&gt;</span>
77</span></code></pre>
78<h2><a href="./demo">Demo</a></h2>
79<h2><a href="./doc/api.html">API</a></h2>
80<h2><a href="./doc/roadmap.html">Roadmap</a></h2>
81<h2><a href="./doc/contributing.html">Contributing</a></h2>
82</div>
83</article>
84<div id="loading">
85 <div class="sk-double-bounce">
86 <div class="sk-child sk-double-bounce1"></div>
87 <div class="sk-child sk-double-bounce2"></div>
88 </div>
89</div>
90
91<script src="https://leungwensen.github.io/zfinder/dist/lib/jquery-3.1.0.min.js"></script>
92<script src="https://leungwensen.github.io/zfinder/dist/lib/screenfull-3.0.0.min.js"></script>
93<script src="https://leungwensen.github.io/zfinder/dist/zfinder/markdown-previewer.js"></script>
94</body>
95</html>