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

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

二、HTML代码：

<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="width: 100%; height: 400px;" id="main">
    </div>

三、js代码（数据获取的方法）：

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

function getData(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);
    }
}

 

 

四、js代码（加载图标的方法）：

/**
* @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);    // 设置报表数据
}
                                        

五、js方法（调用获取数据的方法）：

getData(_loadChart);