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>以上！
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016-09-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
