Echarts动态加载饼状图实例（二）

<div class="ui-container">
    <!--存放数据的div -->
    <div class="ui-list">
        <ul>
            <li>
                <label class="ui-text">审核</label>
                <input type="text"class="ui-input"value="3" />
            </li>
            <li>
                <label class="ui-text">派单</label>
                <input type="text"class="ui-input"value="6" />
            </li>
            <li>
                <label class="ui-text">维修</label>
                <input type="text"class="ui-input"value="8" />
            </li>
        </ul>
    </div>
    <!--存放饼图的div -->
    <div style=" 100%; height: 400px;"id="main">
    </div>

/** getData  获取加载饼图所需数据
*  @param {function} 执行回调函数的参数   
*
*/

functiongetData(callback) {
    var strArr =[];
    $('.ui-list').find('li').each(function(){
        strArr.push({ "value": $(this).find('input').attr('value'), "name": $(this).find('label').text() });
    });

    //成功后的回调
    if(typeof callback === 'function') {
        callback(strArr);
    }
}

/**
* @param {Array} p_obj 初始化报表的数据对象数组
* @param {Number} p_obj[].value 初始化报表的数据
* @param {String} p_obj[].name 初始化报表的数据列名称
*/
function _loadChart(p_obj) {    //加载图表的方法
        var option ={
            tooltip: {    //指示框的设置
               show: true,
               trigger: 'item',
               backgroundColor: 'rgba(247, 41, 4, 0.5)',
               formatter: function(params) {
                   return params.name + '：' +params.value
                },
               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: function(params) {
                            return params.name + '：' +params.value
                        },
                        textStyle: {
                            color: '#CCC',
                            fontSize: 12,
                            fontFamily: 'Microsoft YaHei'}
                    },
                    emphasis: {    //图形在高亮状态下的样式
                        show: true,
                        formatter: function(params) {
                           return params.name + '：' +params.value
                        },
                        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,
                
            }]     
     };
        
     var myChart = echarts.init(document.getElementById('main'));    

     myChart.setOption(option);    //设置报表数据
}
                                        

getData(_loadChart);