Echarts——一個簡單的嵌套餅圖

本文轉載自查看原文 2017-12-26 18:31 7836 Data Visualization

</!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>QQ部
    星座分布圖</title>
    <script src="http://echarts.baidu.com/dist/echarts.js"></script>
</head>
<body>
    <div id="main" style="width:800px;height:800px"></div>
    
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },

            series: [
                {
                    name:'星座',
                    type:'pie',
                    selectedMode: 'single',
                    radius: ['75%', '96%'],

                    label: {
                        normal: {
                            position: 'inside',
                            fontSize: 20,
                            color:'',
                            fontFamily:'Microsoft Yahei'
                        }
                    },
                    data:[
                        {value:4, name:'雙子座'},
                        {value:3, name:'白羊座'},
                        {value:3, name:'金牛座'},
                        {value:2, name:'天蠍座'},
                        {value:2, name:'雙魚座'},
                        {value:2, name:'處女座'},
                        {value:2, name:'射手座'},
                        {value:1, name:'摩羯座'},
                        {value:1, name:'天秤座'},
                        {value:1, name:'水瓶座'},
                        {value:1, name:'獅子座'}
                    ]
                },
                {
                    name:'姓名',
                    type:'pie',
                    radius: ['30%', '70%'],
                    label: {
                        normal: {
                            position:'inside',
                            align:'right',
                            fontSize: 18,
                            fontFamily:'Microsoft YaHei',
                            color:"#FFEFE0"
                        }
                    },
                    data:[
                        {value:1, name:'X1'},
                        {value:1, name:'X2'},
                        {value:1, name:'X3'},
                        {value:1, name:'X4'},
                        {value:1, name:'M1'},
                        {value:1, name:'M2'},
                        {value:1, name:'M3'},
                        {value:1, name:'N1'},
                        {value:1, name:'N2'},
                        {value:1, name:'N3'},
                        {value:1, name:'D1'},
                        {value:1, name:'D2'},
                        {value:1, name:'D3'},
                        {value:1, name:'F1'},
                        {value:1, name:'F2'},
                        {value:1, name:'F3'},
                        {value:1, name:'G1'},
                        {value:1, name:'A1'},
                        {value:1, name:'W1'},
                        {value:1, name:'E1'},
                        {value:1, name:'E2'},
                        {value:1, name:'E3'}
                    ]
                },
                {
                    name:'部門',
                    type:'pie',
                    radius: ['0%', '25%'],
                    label: {
                        normal: {
                            position: 'center',
                            fontSize: 22,
                            fontFamily:'Microsoft YaHei',
                            color:'#80F0E3'
                        }
                    },
                    data:[
                        {value:22, name:'QQ部'}
                    ]
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

顯示效果如下：

解釋：

設置網頁標題：
1. <title>QQ部星座分布圖</title>
導入在線的echarts庫：
1. <script src="http://echarts.baidu.com/dist/echarts.js"></script>
設置頁面尺寸：
1. <div id="main" style="width:800px;height:800px"></div>
初始化echarts實例：
1. var myChart = echarts.init(document.getElementById('main'));
設置圖表內容：
1. var option = {}
在echarts實例中載入option：
1. myChart.setOption(option);
對option的解釋
1. 包含了一個tooltip——用於動態顯示數據標簽，和三個series，series的類型為“pie”餅圖。
2. tooltip的顯示格式為：formatter: "{a} <br/>{b}: {c} ({d}%)"，即顯示數字和百分比。
3. radius用於設置餅圖的內外范圍，如：radius: ['75%', '96%']。
4. 接下來設置標簽的文本格式和數據內容即可。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue+element+echarts實現簡單嵌套餅圖+折線圖+嵌套圖 echarts嵌套餅圖聯動實現 Echarts實現嵌套雙環餅狀圖 Echarts 嵌套餅圖實現，內環點擊控制外環顯示用ggplot包畫一個簡單餅圖 echarts 餅圖 echarts餅圖 Echarts餅圖繪制 echarts 餅狀圖 echarts多圓環餅圖