<p>以下是一个使用ECharts创建饼状图的基本示例，所有的扇形颜色都设置为相同的颜色，并且通过设置<code>borderColor</code>和<code>borderWidth</code>属性来增加扇形之间的缝隙：</p><div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><a href="#cb1-1"></a><span class="kw">var</span> chart <span class="op">=</span> echarts<span class="op">.</span><span class="fu">init</span>(<span class="bu">document</span><span class="op">.</span><span class="fu">getElementById</span>(<span class="st">'main'</span>))<span class="op">;</span><a href="#cb1-2"></a><a href="#cb1-3"></a><span class="kw">var</span> option <span class="op">=</span> {<a href="#cb1-4"></a> <span class="dt">series</span><span class="op">:</span> [<a href="#cb1-5"></a> {<a href="#cb1-6"></a> <span class="dt">name</span><span class="op">:</span> <span class="st">'访问来源'</span><span class="op">,</span><a href="#cb1-7"></a> <span class="dt">type</span><span class="op">:</span> <span class="st">'pie'</span><span class="op">,</span><a href="#cb1-8"></a> <span class="dt">radius</span><span class="op">:</span> <span class="st">'50%'</span><span class="op">,</span><a href="#cb1-9"></a> <span class="dt">data</span><span class="op">:</span> [<a href="#cb1-10"></a> {<span class="dt">value</span><span class="op">:</span> <span class="dv">235</span><span class="op">,</span> <span class="dt">name</span><span class="op">:</span> <span class="st">'视频广告'</span>}<span class="op">,</span><a href="#cb1-11"></a> {<span class="dt">value</span><span class="op">:</span> <span class="dv">274</span><span class="op">,</span> <span class="dt">name</span><span class="op">:</span> <span class="st">'联盟广告'</span>}<span class="op">,</span><a href="#cb1-12"></a> {<span class="dt">value</span><span class="op">:</span> <span class="dv">310</span><span class="op">,</span> <span class="dt">name</span><span class="op">:</span> <span class="st">'邮件营销'</span>}<span class="op">,</span><a href="#cb1-13"></a> {<span class="dt">value</span><span class="op">:</span> <span class="dv">335</span><span class="op">,</span> <span class="dt">name</span><span class="op">:</span> <span class="st">'直接访问'</span>}<span class="op">,</span><a href="#cb1-14"></a> {<span class="dt">value</span><span class="op">:</span> <span class="dv">400</span><span class="op">,</span> <span class="dt">name</span><span class="op">:</span> <span class="st">'搜索引擎'</span>}<a href="#cb1-15"></a> ]<span class="op">,</span><a href="#cb1-16"></a> <span class="dt">itemStyle</span><span class="op">:</span> {<a href="#cb1-17"></a> <span class="dt">color</span><span class="op">:</span> <span class="st">'#40E0D0'</span><span class="op">,</span> <span class="co">// 所有扇形的颜色</span><a href="#cb1-18"></a> <span class="dt">borderColor</span><span class="op">:</span> <span class="st">'#fff'</span><span class="op">,</span> <span class="co">// 扇形的边框颜色</span><a href="#cb1-19"></a> <span class="dt">borderWidth</span><span class="op">:</span> <span class="dv">2</span> <span class="co">// 扇形的边框宽度</span><a href="#cb1-20"></a> }<a href="#cb1-21"></a> }<a href="#cb1-22"></a> ]<a href="#cb1-23"></a>}<span class="op">;</span><a href="#cb1-24"></a><a href="#cb1-25"></a>chart<span class="op">.</span><span class="fu">setOption</span>(option)<span class="op">;</span></code></pre></div><p>在这个示例中，所有的扇形都设置为了青色（#40E0D0），并且扇形之间的缝隙是白色的。你可以根据你的需求修改这些颜色。</p>
相关文章
