_id=5b34a30de885981de3025f27&docid=5b3c321953e60e445060bf47">JS浠ｇ爜鍥</a></li><li data-id="5b719d2674007c177fde1e91" id="5b719d2674007c177fde1e91" data-idx="8"><a class="truncate" href="/bookView?_id=5b34a30de885981de3025f27&docid=5b719d2674007c177fde1e91">Shields</a></li></ul></li></ul></li></ul>
</div>
</div>
<div class="right">
<div class="bookContent">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=11.0, " id="mixia_vpid">
<script src="/dist/jquery.min.js"> </script>
<script src="/dist/zui.min.js"> </script>
<script src="/js/f.js"> </script>
<link href="/css/f.css" rel="stylesheet">
<script>
o.fontSize(o.storeGet('fontSize'))
o.fontFamilySet(o.storeGet('fontFamily'))
</script> <div class="docView">
<div class="editormd-preview">
<div id="editormd" class="editormdPrint font-kai markdown-body editormd-html-preview" style="background: rgb(255, 255, 255); background-size: initial;">
<h1 id="h1-u7EDFu8BA1u56FE"><a name="缁熻鍥" class="reference-link"></a><span class="header-link octicon octicon-link"></span>缁熻鍥</h1><p><i class="iconfont icon-chart"></i> </p>
<table>
<thead>
<tr>
<th>鍚嶇О</th>
<th>鏀寔</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="iconfont icon-peity"></i>琛屽唴</td>
<td>鏌辩姸鍥俱佺嚎鍥俱侀ゼ褰㈠浘銆佺幆褰㈠浘</td>
</tr>
<tr>
<td><i class="iconfont icon-bar"></i>Echart</td>
<td>鏌辩姸鍥俱佺嚎鍥俱侀ゼ褰㈠浘銆佺幆褰㈠浘銆佺帿鐟板浘銆佹紡鏂楀浘銆侀噾瀛楀銆侀浄杈惧浘銆佽剳鍥俱佸瓧浜</td>
</tr>
<tr>
<td>Frappe</td>
<td>鏌辩姸鍥俱佺嚎鍥俱侀ゼ褰㈠浘銆佺櫨鍒嗘瘮鍥</td>
</tr>
</tbody>
</table>
<h2 id="h2-u793Au4F8B"><a name="绀轰緥" class="reference-link"></a><span class="header-link octicon octicon-link"></span>绀轰緥</h2><h3 id="h3-u884Cu5185"><a name="琛屽唴" class="reference-link"></a><span class="header-link octicon octicon-link"></span>琛屽唴</h3><p>鏌辩姸 <span class="peity bar" style="display: none;">1,2,3</span><svg class="peity" height="16" width="32"><rect data-value="1" fill="#ff9900" x="1.0666666666666667" y="10.666666666666668" width="8.533333333333333" height="5.333333333333332"></rect><rect data-value="2" fill="#ff9900" x="11.733333333333334" y="5.333333333333334" width="8.533333333333331" height="10.666666666666666"></rect><rect data-value="3" fill="#ff9900" x="22.400000000000002" y="0" width="8.533333333333331" height="16"></rect></svg>銆佺嚎<span class="peity line" style="display: none;">19,3,2,12,1,9</span><svg class="peity" height="16" width="32"><polygon fill="#FEECC9" points="0 15.5 0 0.5 6.4 13.131578947368421 12.8 13.921052631578947 19.200000000000003 6.026315789473685 25.6 14.710526315789474 32 8.394736842105264 32 15.5"></polygon><polyline fill="none" points="0 0.5 6.4 13.131578947368421 12.8 13.921052631578947 19.200000000000003 6.026315789473685 25.6 14.710526315789474 32 8.394736842105264" stroke="#ff9900" stroke-width="1" stroke-linecap="square"></polyline></svg>銆侀ゼ褰 <span class="peity pie" style="display: none;">1,3</span><svg class="peity" height="16" width="16"><path d="M 8 0 A 8 8 0 0 1 16 8 L 8 8" data-value="1" fill="#ff9900"></path><path d="M 16 8 A 8 8 0 1 1 7.999999999999998 0 L 8 8" data-value="3" fill="#fff4dd"></path></svg> 銆佺幆褰 <span class="peity donut" style="display: none;">1,4</span><svg class="peity" height="16" width="16"><path d="M 8 0 A 8 8 0 0 1 15.60845213036123 5.52786404500042 L 11.804226065180615 6.76393202250021 A 4 4 0 0 0 8 4" data-value="1" fill="#ff9900"></path><path d="M 15.60845213036123 5.52786404500042 A 8 8 0 1 1 7.999999999999998 0 L 7.999999999999999 4 A 4 4 0 1 0 11.804226065180615 6.76393202250021" data-value="4" fill="#fff4dd"></path></svg></p>
<pre><code>鏌辩姸 :bar 1,2,3:銆佺嚎:line 19,3,2,12,1,9:銆侀ゼ褰:pie 1,3: 銆佺幆褰 :donut 1,4:
</code></pre><h3 id="h3-echarts"><a name="Echarts" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Echarts</h3><div class="echarts" style="color:transparent;height:300px">bar
Jan|Feb|Mar
example|1|9|4
example1|2|6| 5</div><pre>```echarts
bar
Jan|Feb|Mar
example|1|9|4
example1|2|6| 5<br>```</pre><h3 id="h3-frappe"><a name="Frappe" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Frappe</h3><p>鏀寔鐨勬祻瑙堝櫒<br><i class="icon fa fa-firefox" style="" title="firefox"></i> firefox <i class="icon fa fa-chrome" style="" title="chrome"></i> chrome <i class="icon fa fa-safari" style="" title="safari"></i> safari <i class="icon fa fa-opera" style="" title="opera"></i> opera</p>
<div class="frappe" style="color:transparent;height:300px"><div class="chart-container"><div class="graph-svg-tip comparison" style="top: 0px; left: 0px; opacity: 0;"><span class="title"></span>
<ul class="data-point-list"></ul>
<div class="svg-pointer"></div></div><svg class="frappe-chart chart" width="252" height="240"><defs></defs><g class="bar-chart chart-draw-area" transform="translate(50, 30)"><g class="y axis" transform=""><g transform="translate(0, 130)" stroke-opacity="1"><line class="line-horizontal " x1="-6" x2="178" y1="0" y2="0" style="stroke: rgb(218, 218, 218);"></line><text x="-10" y="0" dy="3px" font-size="10px" text-anchor="end">0</text></g><g transform="translate(0, 104)" stroke-opacity="1"><line class="line-horizontal " x1="-6" x2="178" y1="0" y2="0" style="stroke: rgb(218, 218, 218);"></line><text x="-10" y="0" dy="3px" font-size="10px" text-anchor="end">2</text></g><g transform="translate(0, 78)" stroke-opacity="1"><line class="line-horizontal " x1="-6" x2="178" y1="0" y2="0" style="stroke: rgb(218, 218, 218);"></line><text x="-10" y="0" dy="3px" font-size="10px" text-anchor="end">4</text></g><g transform="translate(0, 52)" stroke-opacity="1"><line class="line-horizontal " x1="-6" x2="178" y1="0" y2="0" style="stroke: rgb(218, 218, 218);"></line><text x="-10" y="0" dy="3px" font-size="10px" text-anchor="end">6</text></g><g transform="translate(0, 26)" stroke-opacity="1"><line class="line-horizontal " x1="-6" x2="178" y1="0" y2="0" style="stroke: rgb(218, 218, 218);"></line><text x="-10" y="0" dy="3px" font-size="10px" text-anchor="end">8</text></g><g transform="translate(0, 0)" stroke-opacity="1"><line class="line-horizontal " x1="-6" x2="178" y1="0" y2="0" style="stroke: rgb(218, 218, 218);"></line><text x="-10" y="0" dy="3px" font-size="10px" text-anchor="end">10</text></g></g><g class="x axis" transform=""><g transform="translate(28.