一、相关问题记录:

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:;
width: 50%;
height:100%;
float: left;
border: 1px solid;
border-bottom: 0px;
} #manage_space.view>.handler {
position: absolute;
left: 50%;
top:;
bottom:;
width: 3px;
background-color: transparent;
} #manage_space .charts-show{
position: absolute;
right:;
width: 50%;
left:50%;
padding:;
height:100%;
top:;
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>

以上!

Echarts的相关问题记录与应用的更多相关文章

  1. piezo film 压电相关信息记录 (2018-05-04 更新)

    piezo film 压电相关信息记录 起因需要使用 Piezo 做一些设计 http://www.te.com.cn/chn-zh/videos/transportation/piezo-film- ...

  2. saltstack 开发相关命令记录

    SALT API开发相关命令记录. 查看当前的salt key信息salt-key -L 测试被控主机的连通性salt '*' test.ping 远程命令执行测试salt '*' cmd.run ' ...

  3. Vue-cli 多页相关配置记录

    Vue-cli 多页相关配置记录 搭建一个顺手的MPA项目脚手架,其实根据项目的不同目录结构和打包配置都可以进行灵活的调整.这次的项目可能是包含各种客户端和管理后台在一起的综合项目所以需要将样式和脚本 ...

  4. echarts相关问题记录

    1.图标距离容器边界 //echats options options : { //... grid : { top : 40, //距离容器上边界40像素 bottom: 30 //距离容器下边界3 ...

  5. Yii2的相关学习记录,前后台分离及migrate使用(七)

    最近一直忙其它的(其实是懒!),将<深入理解Yii2>看了一遍,一些当初没明白的稍微明了了点,然后又看yii2的图片上传等处理.富文本.restful什么的,但由于没进行到这里,只看也不管 ...

  6. Yii2的相关学习记录,alert等美化、confirm异步、session中的flash及小部件的使用(六)

    呃,系统自带的alert.confirm等弹出框实在是难看,作为一个颜控,这能忍? 这里我用的是kartik-v/yii2-dialog,这个是基于bootstrap3-dialog这个来做了一些常用 ...

  7. Yii2的相关学习记录,初始化Yii2(二)

    前面已经将Yii2下载下来了,那我们就需要能实际的使用. 一.初始化,因为我都是在windows系统下,所以用cmd命令打开下载下来的Yii2的根目录.然后运行下面命令: init 会提示选择0为开发 ...

  8. Yii2的相关学习记录,下载Yii2(一)

    原先学习过Yii1的相关知识,虽然也是半懂不懂的,但稍微的结构是了解的.现在利用晚上的时间学习下Yii2的使用,打算建一个后台管理系统,这里记录下,以免自己以后忘记. 目前已看一部分Yii2的权威指南 ...

  9. java 项目相关 学习记录

    一位资深程序员大牛给予Java初学者的学习路线建议  [任何时期都可以好好看看] https://www.imooc.com/article/8993 https://www.jianshu.com/ ...

随机推荐

  1. Python时间处理之time模块

    1.time模块简介 time模块提供各种操作时间的函数  说明:一般有两种表示时间的方式:       第一种是时间戳的方式(相对于1970.1.1 00:00:00以秒计算的偏移量),时间戳是惟一 ...

  2. date

    更改时区 用系统备好的时区文件覆盖掉当前的配置文件,/etc/里装的是当前系统的配置文件 $sudo cp /usr/share/zoneinfo/Asia/Chongqing /etc/localt ...

  3. Android之drawable state各个属性详解

    android:drawable 放一个drawable资源android:state_pressed 是否按下,如一个按钮触摸或者点击.android:state_focused 是否取得焦点,比如 ...

  4. python可分组字典

    # -*- encoding: UTF-8 -*- from collections import defaultdict class News(object): def __init__(self, ...

  5. Windows批处理:自动检查服务器连通性

    该技术与上一篇<自动检查网络连通性>的实现原理相同,我将脚本稍微改动了下,用于检查公司服务器的连通性,简单快捷.在这里附上修改方法. @echo off color 1F title 服务 ...

  6. Eliot

    T.S. Eliot - Biographical Thomas Stearns Eliot (1888-1965) was born in St. Louis, Missouri, of an ol ...

  7. [麦先生]TP3.2之微信开发那点事[基础篇](微信支付签名算法)

    两种模式:扫码支付和微信内支付(调用js-sdk) trade_type==native即扫码支付,只需要将code_url转成二维码,使用微信扫码即可: js-sdk微信内支付-调用微信js-sdk ...

  8. MMORPG大型游戏设计与开发(客户端架构 part15 of vegine)

    一个接口需要统一的派生接口,这样做的好处在于能够统一的进行管理.我所知的脚本语言中,接口有多重接口,也还有所谓的虚基类,这些都是方便类的管理.在vengine(微引擎)中,统一的的接口管理为kerne ...

  9. CF722C. Destroying Array[并查集 离线]

    链接:Destroying Array C. Destroying Array time limit per test 1 second memory limit per test 256 megab ...

  10. kali开启ssh

    Kali 2.0安装之后需要做的事--使用SSH进行远程登录   2015年8月11日,Kali官方推出了新的kali系统2.0版本,此次升级最大的特点就是系统界面的设计理念更加先进,以及系统的升级方 ...