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>
以上！
