Echarts一個圖例可以共用兩個或者兩個以上的餅圖

碼農加茶農發表於2019-05-11
Echarts

Echarts一個圖例可以共用兩個或者兩個以上的餅圖，剛開始以為不能實現，其實很簡單，以及餅圖上寫上百分比文字，啥也不說明了，直接上原始碼 


<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<style type="text/css">
*{font-size:12px; margin:0px; padding:0px}
html,body{height:100%; width:100%; overflow:hidden}
</style>
</head>

<body>
    <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
    <!--Step:1 為ECharts準備一個具備大小（寬高）的Dom-->
    
    <!--Step:2 Import echarts.js-->
    <!--Step:2 引入echarts.js-->
    <script src="js/echarts.js"></script>
    
    <script type="text/javascript">
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 為模組載入器配置echarts的路徑，從當前頁面連結到echarts.js，定義所需圖表路徑
    require.config({
        paths: {
            echarts: './js'
        }
    });
    
    // Step:4 require echarts and use it in the callback.
    // Step:4 動態載入echarts然後在回撥函式中開始使用，注意保持按需載入結構定義圖表路徑
    require(
        [
            'echarts',
            'echarts/chart/pie'
        ],
        function (ec) {
           
            //餅圖
            var myChart = ec.init(document.getElementById('main'));
            myChart.setOption({
                backgroundColor: '#f7f7f7',//背景顏色
                tooltip : {
                    show: true,
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    x : 'center',
                    data:['班車','包車','危險品','貨運','出租','公交','駕培','泥頭車','其他']
                },
                toolbox: {
                    show : false,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable:false,
                series : [
                    {
                        name:'報警數佔比',
                        type:'pie',
                        center: ['25%', '50%'],
                        radius: [0, '60%'],
                        data:[
                            {value:214, name:'班車'},
                            {value:300, name:'包車'},
                            {value:240, name:'危險品'},
                            {value:128, name:'貨運'},
                            {value:340, name:'出租'},
                            {value:278, name:'公交'},
                            {value:210, name:'駕培'},
                            {value:258, name:'泥頭車'},
                            {value:108, name:'其他'}
                        ],
                        itemStyle: {//系列級個性化
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                      '#339CD1','#FE8463','#9BCA63','#FAD860',
                                       '#9CD2ED','#F8AB96','#80BF35','#F3C72C','#C1232B'
                                    ];
                                    return colorList[params.dataIndex]
                                },
                                labelLine:{//餅圖不顯示線條
                                    length:2,
                                    show:false
                                },
                                label:{//餅圖不顯示文字
                                    show:true,
                                    position : 'inner',//餅圖圖上顯示百分比
                                    formatter : function (params) {                         
                                      return (params.percent - 0).toFixed(0) + '%'
                                    },
                                    textStyle:{
                                        fontSize:14
                                    }
                                },
                            }                            
                        }
                    },
                    {
                        name:'掉線數佔比',
                        type:'pie',
                        center: ['75%', '50%'],
                        radius: [0, '60%'],
                        data:[
                            {value:314, name:'班車'},
                            {value:200, name:'包車'},
                            {value:140, name:'危險品'},
                            {value:228, name:'貨運'},
                            {value:240, name:'出租'},
                            {value:378, name:'公交'},
                            {value:310, name:'駕培'},
                            {value:158, name:'泥頭車'},
                            {value:208, name:'其他'}
                        ],
                        itemStyle: {//系列級個性化
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                      '#339CD1','#FE8463','#9BCA63','#FAD860',
                                       '#9CD2ED','#F8AB96','#80BF35','#F3C72C','#C1232B'
                                    ];
                                    return colorList[params.dataIndex]
                                },
                                labelLine:{//餅圖不顯示線條
                                    length:2,
                                    show:false
                                },
                                label:{//餅圖不顯示文字
                                    show:true,
                                    position : 'inner',//餅圖圖上顯示百分比
                                    formatter : function (params) {                         
                                      return (params.percent - 0).toFixed(0) + '%'
                                    },
                                    textStyle:{
                                        fontSize:14
                                    }
                                }
                            }                            
                        }
                    }
                ]
            });            
        }
    );
    </script>
    <div id="main" style="width:100%; height:100%"></div>
</body>
</html>


有喜歡echarts的可以，可以多多發貼，互相交流

由龐順龍最後編輯於：4年前

內容均為作者獨立觀點，不代表八零IT人立場，如涉及侵權，請及時告知。

相關文章