Echarts動態加載餅狀圖的實例

一、引入echarts.js文件（下載頁:http://echarts.baidu.com/download.html）

二、HTML代碼：

<div style="width: 100%; height: 400px;" id="main">
</div>

三、js代碼（加載圖表的方法）：

/**
* @param {String} p_chart 初始化報表的id
* @param {Array} p_obj 初始化報表的數據對象數組
* @param {Number} p_obj[].value 初始化報表的數據
* @param {String} p_obj[].name 初始化報表的數據列名稱
*/
function _loadChart(p_chart, p_obj) {    // 加載圖表的方法
    if(this[p_chart]) {    // 判斷該圖表是否存在，存在即只替換值
         var option = {
             series: {
                  data: p_obj
             }
        }; 
    } else {
        var option = {
            tooltip: {    // 指示框的設置
               show: true,
               trigger: 'item',
               backgroundColor: 'rgba(247, 41, 4, 0.5)',
               formatter: '{b} : <br/> {c} ({d}%)',
               textStyle: {
                   color: '#CCC',
                   fontSize: 14,
                   fontFamily: 'Microsoft YaHei',
                   fontWeight: 'bold'
                }         
             },
            series: [{
                name: '實有人口',
                type: 'pie',
                radius: '55%',   //  radius: '55%'即為餅狀圖;radius: ['27%', '54%']即為環形餅狀圖
                center: ['58%', '55%'],     // 餅圖距離左、上的百分比   
                label: {    // 餅圖圖形上的文本標簽
                    normal: {    // 圖形在默認狀態下的樣式
                        show: true,
                        formatter: '{b}\n{d}%',
                        textStyle: {
                            color: '#CCC',
                            fontSize: 12,
                            fontFamily: 'Microsoft YaHei'
                        }
                    },
                    emphasis: {    // 圖形在高亮狀態下的樣式
                        show: true,
                        formatter: '{b}\n{d}%',
                        textStyle: {
                            color: '#CCC',
                            fontSize: 12,
                            fontFamily: 'Microsoft YaHei'
                        }
                    }
                },
                labelLine: {    // 標簽的視覺引導線樣式.在 label 位置 設置為'outside'的時候會顯示視覺引導線
                    normal: {
                       show: true,
                        length: 5 
                    },
                    emphasis: {
                       show: true,
                        length: 5 
                    }
                },
                itemStyle: {    // 圖形樣式
                    normal: {
                        color: '',
                         shadowBlur: 10,
                         shadowColor: 'rgba(35, 69, 128, 0.8)'   
                    }  
                },
                data: p_obj,
                
            }]     
        };
        
         this[p_chart] = echarts.init(document.getElementById(p_chart));    
    }

     this[p_chart].setOption(option);    // 設置報表數據
}

四、js方法（調用加載圖表的方法）：

_loadChart("main", [{
   value: (Math.random() * 100).toFixed(0),
    name: '車輛卡口'
}, {
   value: (Math.random() * 100).toFixed(0),
    name: '人員卡口'
}]);