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: '人员卡口'
}]);