Echarts的相关问题记录与应用

一、相关问题记录：

1、对图表的div进行隐藏操作，使用hide()或display:none,重新展示时，会造成图表无法获取高度,导致图表的高宽不符合预期：

解决方法：最后调用一下resize()函数， 例如： var myCharts =  echarts.init($('#id')[0]),   myCharts.setOption(option)   myCharts.resize();

2、饼图的大小是有radius参数决定的。参数为字符串：百分比；

------------------------------------------------------------------------------------------------------------

二、Echarts应用(集成到angularjs中)：

1、html:

<div id="manage_space" class="view">
    <div class="data-show content">
        <div class="header">
            <div class="selectType">
                <select data-ng-model="queryType"
                        data-ng-options="x for (x, y) in queryTypes"
                >
                </select>        
            </div>
            <span class="input-group-filters">
                    <input type="text" placeholder="输入关键词过滤" data-ng-model="keyword" />
            </span>
            <span>
                <a class="btn btn-default btn-sm" data-ng-click="refresh()"><i class="fa fa-refresh"></i> 刷新</a>
            </span>
        </div>
        <div class="data-content">
                <div class="loader" data-ng-if="loading">正在加载...</div>
                <div class="nodata-p" data-ng-if="!loading && spaces.length == 0">
                    <div class="nodata-c">
                        <small class="text-muted">抱歉，暂无数据！</small>
                    </div>
                </div>
                <ol class="ns-list-group">
                    <li class="ns-list-group-item-title">
                        <div class="col-md-3">
                            <div>名称</div>
                        </div>
                        <div class="col-md-3">
                            <div>总大小</div>
                        </div>
                        <div class="col-md-2">
                            <div>预警值</div>
                        </div>
                        <div class="col-md-2">
                            <div>最小值</div>
                        </div>
                        <div class="col-md-2">
                            <div>已使用</div>
                        </div>
                        <div class="clearfix"></div>
                    </li>
                    <li class="ns-list-group-item" data-ng-repeat="space in spaces | filter : ifContain">
                        <div class="col-md-3">
                            <div><a data-ng-click="showChart(space)" href="javascript:;">{{space.name}}</a></div>
                        </div>
                        <div class="col-md-3">
                            <div>{{space.spaceInfo.capacityGigaBytes}} G</div>
                        </div>
                        <div class="col-md-2">
                            <div>{{space.spaceInfo.warningBytes}} G</div>
                        </div>
                        <div class="col-md-2">
                            <div>{{space.spaceInfo.blockBytes}} G</div>
                        </div>
                        <div class="col-md-2">
                            <div>{{space.spaceInfo.usedBytes}} G</div>
                        </div>
                        <div class="clearfix"></div>
                    </li>
                </ol>
        </div>
    </div>
    <div id="h-handler" class="handler"></div>
    <div class="charts-show">
        <div class="selectType">
            <select data-ng-model="chart"
                    data-ng-options="x for (x, y) in myCharts"
            >
            </select>        
        </div>
        <div class="chart-title">
            <div class="barchart-icon" data-ng-if="chart=='bar'">
                <span data-ng-if="queryType=='group'" class="group-title">工作组空间使用情况</span>
                <span data-ng-if="queryType=='user'" class="user-title">用户空间使用情况</span>
                <ol>
                    <li class="normal">正常</li>
                    <li class="warn">警告</li>
                    <li class="alerted">预警</li>
                    <li class="surplus">剩余</li>
                </ol>
            </div>    
            <div class="piechart-icon" data-ng-if="chart=='pie'">
                <span data-ng-if="queryType=='group'" class="group-title">工作组空间使用情况<br/><span>单位：GB</span></span>
                <span data-ng-if="queryType=='user'" class="user-title">用户空间使用情况<br/><span>单位：GB</span></span>
                <ol>
                    <li><span class="surpluspace">剩余</span>剩余空间</li>
                    <li><span class="usedspace">已用</span>已用空间</li>
                </ol>
            </div>        
        </div>
        
        <div class="bar-show col-md-11" data-ng-show="chart=='bar'" bar-charts  data-source="baseunits"></div>
        <div class="pie-show" data-ng-show="chart=='pie'" pie-charts  data-source="baseunit" 
                 data-ng-repeat="baseunit in baseunits"></div>
    </div>
</div>

2、css

#manage_space{
    margin-left: 2px;
    float: left;
}
#manage_space.view{
    display: inline;
}
#manage_space.view>.data-show {
    padding: 0;
    width: 50%;
    height:100%;
    float: left;
    border: 1px solid;
    border-bottom: 0px;
}

#manage_space.view>.handler {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: transparent;
}

#manage_space .charts-show{
    position: absolute;
    right: 0;
    width: 50%;
    left:50%;
    padding: 0;
    height:100%;
    top:0;
    margin-top: 10px;
    padding-left: 5px;
    overflow: auto;
}


#manage_space .header{
    margin-top: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid;
    padding-bottom: 5px;
}

#manage_space .selectType{
    float:left;
    margin-left:10px;
}

#manage_space .selectType select{
    padding-right: 30px;
    height:26px;
}

#manage_space .header .input-group-filters {
    display: inline-block;
    vertical-align: middle;
    margin-left: 50px;
    margin-top:-5px;
}

#manage_space .header span>a{
    margin-top: -2px;
}

#manage_space ol li{
    padding-top: 5px;
    padding-bottom: 5px;
}

#manage_space .ns-list-group-item-title div{
    font-weight:bold;
    text-align: center;
}


#manage_space.view>.content .ns-list-group-item {
    line-height: 2.0em;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    white-space: nowrap;
}


#manage_space .charts-show>.selectType{
    float: none;
    margin-left: 20px;
}

#manage_space .charts-show>.chart-title{
    float: none;
    margin-left: 20px;
    font-weight: bold;
    margin-top: 10px;
    font-size: 18px;
}

.barchart-icon .group-title;.barchart-icon .user-title{
    text-align: left;
    display: block;
    float: left;
}

.barchart-icon ol{
    float: right;
    list-style: none;
    font-weight: normal;
    font-size: 8px;
    
}

.barchart-icon ol li{
    padding:2px 10px;
    float: left;
    margin-right: 3px;
}

.barchart-icon .normal{
    background-color: #00FE69;
}
.barchart-icon .warn{
    background-color: #FEFE1F;
}
.barchart-icon .alerted{
    background-color: #FF0301;
}
.barchart-icon .surplus{
    background-color: #3B9BFD;
}

.piechart-icon{
    text-align: center;
    display: block;
}

.group-title>span , .user-title>span{
    font-weight: normal;
    font-size: 8px;
}

.piechart-icon ol{
    text-align: left;
    list-style: none;
    margin-top: -50px;
    font-weight: normal;
    font-size: 10px;
}

.piechart-icon ol li>span{
    margin-right: 10px;
    padding:0px 3px;
    font-size: 6px;
}
.piechart-icon .surpluspace{
    background: #C13530;
    color: #C13530;
    
}
.piechart-icon .usedspace{
    background: #2E4453;
    color: #2E4453;
}

#manage_space .bar-show{
    padding: 10px;
    height: 90%;
    position: absolute;
    text-align: center;
    margin-top: -20px;
}
#manage_space .pie-show{
    padding:5px 5px 10px 10px;
    float:left;
    height: 30%;
    width: 30%;    
    margin-top: -50px;
    margin-bottom: 20px;
}

3、js

nsiteConsoleApp.controller('ManageSpaceController',function($scope, 
        $rootScope, $filter, Proxy, Message){
    
    $scope.resetMenu('manage', 'space');

    var currentStationId = $scope.managedStationId;
    
    $scope.queryType = 'group';
    $scope.queryTypes = {
        '工作组' :'group',
        '用户    ' :'user'
    };
    $scope.chart = 'bar';
    $scope.myCharts = {
            "柱状图":'bar',
            "饼图":'pie'
    };
    $scope.$watch('queryType',function(newV,oldV,$scope){
        $scope.refresh();
    });
    $scope.$watch('keyword',function(newV,oldV,$scope){
        if(typeof(newV) == "undefined") return;
        $scope.baseunits = [];
        angular.forEach($scope.spaces,function(unit){
            if(unit.name.indexOf($scope.keyword) > -1){
                $scope.baseunits.push(unit);
            }
        });
    });
    
    $scope.ifContain = function(unit){
        if($scope.keyword && $scope.keyword.length>0){
            return unit.name.indexOf($scope.keyword) > -1;
        }
        return true;
    };
    
    $scope.refresh = function(){
        $scope.loading = true;
        $scope.spaces = [];
        if($scope.queryType === 'group'){
        /*    Proxy.security_lo.Group.findByParentId({ parentId: currentStationId },
                    function success(resp) {
                        $scope.loading = false;
                        $scope.spaces = resp;
                        $scope.baseunits = resp;
                    });*/
            Proxy.security_lo.Group.queryAll({start:0, limit:1000},
                    function success(resp) {
                        $scope.loading = false;
                        $scope.spaces = [];
                        $(resp.items).each(function(i, group){
                            if(group.stationId = currentStationId ){
                                $scope.spaces.push(group);
                            }
                        });
                        $scope.baseunits = $scope.spaces;
                    });
            
        }else{
            Proxy.security_lo.User.findByParentId({ parentId: currentStationId },
                    function success(resp) {
                        $scope.loading = false;
                        $scope.spaces = resp;
                        $scope.baseunits = resp;
                    });
        }
    };
    //$scope.refresh();
    
    //展示单条数据
    $scope.showChart= function(baseunit){
        if(baseunit.uniqueName){
            $scope.baseunits = [];
            $scope.baseunits.push(baseunit);
        }else{
            //获取组成员
            Proxy.Security.findUsersByGroupIds({
                groupIds: [baseunit.id],
            }, function (resp) {
                if(resp[0]){
                    $scope.baseunits = resp[0].users;    
                }else{
                    Message.warn('此栏目下无用户！');
                }
            });
        }
        
    }
})
.directive('barCharts',function(){
    return{
        restrict:'EA',
        scope:{
            source : '='
        },
        template:'<div>柱图</div>',
        controller:function($scope){
        },
        link:function(scope,element,attr){
            var chart = element.find('div')[0];
            var parent = element['context'];
            var width , height;
            width = parent.clientWidth || 600;
            height = parent.clientHeight || 400;
            chart.style.width = (width- 0) +'px';
            chart.style.height = (height- 0) + 'px';
            
            scope.option = {
                    title:{
                        text:''
                    },
                    tooltip:{
                        trigger:'axis',
                        axisPointer:{
                            type:'shadow'
                        }
                    },
                    legend:{
                    //    right:'right',
                    //    data:['正常','警告','预警','剩余']
                    },
                    xAxis:{
                        type:'value',
                        name:'(GB)'
                    },
                    yAxis:{
                        type: 'category',
                        axisLabel:{
                            rotate:0,
                            textStyle:{
                                fontSize:8,
                                fontWeight:'bold'
                            }
                        },
                        data: []
                    },
                    grid: {
                            left: '3%',
                            right: '7%',
                            bottom: '3%',
                            containLabel: true
                     },
                    series:[
                            {
                            name:'已使用',
                            type:'bar',
                            stack:'存储空间',
                            label:{
                                normal:{
                                    show:false,
                                    position:'insideRight'
                                }
                            },
                            barWidth:'50%',
                            data:[]
                            },
                            {
                                name:'剩 余',
                                type:'bar',
                                stack:'存储空间',
                                label:{
                                    normal:{
                                        show:false,
                                        position:'insideRight'
                                    }
                                },
                                itemStyle:{
                                    normal:{
                                        color:'#CBCBCB'    
                                    }
                                },
                                barWidth:'50%',
                                data:[]
                            }
                    ]
                };
            
            
            scope.$watch('source', function(newVal, oldVal, scope){
                var baseunits = newVal;
                if(typeof(baseunits) == "undefined") return;
                chart.style.height = (height * (baseunits.length < 7 ? 7 : baseunits.length) / 10)+'px';
                var barChart = echarts.init(chart);
                //给图表赋值
                scope.option.yAxis.data = [];
                scope.option.series[0].data = [];
                scope.option.series[1].data = [];
                for (var int =  baseunits.length - 1 ; int >=0; int--) {
                    var baseunit = baseunits[int];
                    scope.option.yAxis.data.push(baseunit.name);
                    scope.option.series[0].data.push(
                                  {
                                      value: baseunit.spaceInfo.usedBytes,
                                      itemStyle:{
                                          normal:{
                                              color: baseunit.spaceInfo.usedBytes*100 /baseunit.spaceInfo.capacityGigaBytes > 85 ?
                                                       '#FF0301': (baseunit.spaceInfo.usedBytes*100 /baseunit.spaceInfo.capacityGigaBytes < 70) ? 
                                                               '#00FA67':'#CDCD19'
                                          }
                                      }
                                  }
                    );
                    scope.option.series[1].data.push((baseunit.spaceInfo.capacityGigaBytes - baseunit.spaceInfo.usedBytes)<0 ?
                            0:(baseunit.spaceInfo.capacityGigaBytes - baseunit.spaceInfo.usedBytes));
                };
                barChart.setOption(scope.option);
                barChart.resize();
            });
        }
    };
})
.directive('pieCharts',function(){
    return{
        restrict:'EA',
        scope:{
            source : '='
        },
        template:'<div>饼图</div>',
        controller:function($scope){
        },
        link:function(scope,element,attr){

            var chart = element.find('div')[0];
            var parent = element['context'];
            var width , height;
            width = parent.clientWidth || 200;
            height = parent.clientHeight || 200;
            chart.style.width = (width - 0) +'px';
            chart.style.height = (height + 0) +'px';
            
            var pieChart = echarts.init(chart);
            scope.option = {
                       backgroudColor:'#F2F2F2',
                       title : {
                           text: '',
                           x:'center',
                           y:'bottom',
                           padding:[20,0,5,0],
                           textStyle:{
                               fontSize:16
                           }
                       },
                       tooltip:{
                           trigger:'item',
                           formatter:'{a}<br/>{b} {c}({d}%)',
                           position:[-10, 10]
                       },
                       series:[
                                {
                                    name:'空间使用',
                                    type:'pie',
                                    radius:'65%',
                                    center:['50%','60%'],
                                    label:{
                                        normal:{
                                            show : true,
                                            position : 'inside'
                                        }
                                    },
                                    data:[
                                        {
                                            value: 0 ,
                                            name:'已使用',itemStyle:{
                                            normal:{
                                                color:'#324A5B'
                                            }
                                        }},
                                        {
                                            value: 0,
                                            name:'未使用',
                                            itemStyle:{
                                            normal:{
                                                color:'#C13530'
                                            }
                                        }}
                                    ],
                                    itemStyle:{
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                       ]
                    };
            
            scope.$watch('source', function(newVal, oldVal, scope){
                var baseunit = newVal;
                scope.option.title.text = baseunit.name;
                scope.option.series[0].data[0].value = baseunit.spaceInfo.usedBytes;
                scope.option.series[0].data[1].value = baseunit.spaceInfo.capacityGigaBytes - baseunit.spaceInfo.usedBytes;
                pieChart.setOption(scope.option);
                pieChart.resize();
            });
        }
    };
})

 4、主页：

<!DOCTYPE html>
<html lang="zh_CN" data-ng-app="nsiteConsoleApp">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../3rd/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../3rd/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="../3rd/bootstrap/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/manage/space.css">
        <script src="../3rd/echarts/echarts.js"></script>
        <script src="js/controllers/manage/space.js"</script>
                <script src="../3rd/jquery/jquery.min.js"></script>
        <script src="../3rd/bootstrap/js/bootstrap.min.js"></script>
        <script src="../3rd/angular.min.js"></script>
</script>
        <!--  -->
        <script src="../3rd/date-ui/date-ui.js"></script>
        <!--  -->
    </head>
    <body data-ng-controller="MainController">
        
        <header id="nv_header" data-ng-if="session.isLogged">
            <nav class="navbar navbar-inverse" role="navigation">
            </nav>
        </header>
        <nav id="nv_left" data-ng-if="session.isLogged">
        </nav>
        <article id="nv_content" data-ng-view data-ng-if="session.isLogged || isLogging"></article>
        <footer></footer>
    </body>

</html>

以上！