基礎(chǔ)餅圖
餅圖主要用于表現(xiàn)不同類目的數(shù)據(jù)在總和中的占比。每個(gè)的弧度表示數(shù)據(jù)數(shù)量的比例秋泳。
餅狀圖顯示信息,內(nèi)容,值,百分比都顯示的代碼
series: [{
? ? ? ? ? ? ? ? ? ? name: '產(chǎn)品成本',
? ? ? ? ? ? ? ? ? ? type: 'pie',
? ? ? ? ? ? ? ? ? ? radius: '55%',
? ? ? ? ? ? ? ? ? ? center: ['50%', '50%'],
? ? ? ? ? ? ? ? ? ? data: production,
? ? ? ? ? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? ? ? ? ? ? ? ? formatter: '挠将:{c}' + '\n\r' + '(koockus%)'
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }]
最簡(jiǎn)單的餅圖
餅圖的配置和折線圖耕姊、柱狀圖略有不同婚陪，不再需要配置坐標(biāo)軸，而是把數(shù)據(jù)名稱和值都寫在系列中渠牲。以下是一個(gè)最簡(jiǎn)單的餅圖的例子旋炒。
<!DOCTYPE html>
? ? <html>
? ? ? ? <head>
? ? ? ? ? ? <meta charset="utf-8">
? ? ? ? ? ? <title>第一個(gè) ECharts 實(shí)例--拾光分享網(wǎng)</title>
? ? ? ? ? ? <!-- 引入 echarts.js -->
? ? ? ? ? ? <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
? ? ? ? </head>
? ? ? ? <body>
? ? ? ? ? ? <!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom -->
? ? ? ? ? ? <div id="main" style="width: 600px;height:400px;"></div>
? ? ? ? ? ? <script type="text/javascript">
? ? ? ? ? ? ? ? // 基于準(zhǔn)備好的dom签杈，初始化echarts實(shí)例
? ? ? ? ? ? ? ? var myChart = echarts.init(document.getElementById('main'));
? ? ? ? ? ? ? ? // 指定圖表的配置項(xiàng)和數(shù)據(jù)
? ? ? ? ? ? ? ? var option = {
? ? ? ? ? ? ? ? ? ? series: [{
? ? ? ? ? ? ? ? ? ? ? ? type: 'pie',
? ? ? ? ? ? ? ? ? ? ? ? data: [{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? value: 335,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? name: '直接訪問'
? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? value: 234,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? name: '聯(lián)盟廣告'
? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? value: 1548,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? name: '搜索引擎'
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? formatter: '瘫镇: {c}(vcjubl7%)' //自定義顯示格式(b:name, c:value, d:百分比)
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
? ? ? ? ? ? ? ? myChart.setOption(option);
? ? ? ? ? ? </script>
? ? ? ? </body>
? ? </html>
