AngularJS引入Echarts的Demo
最近要用到图表展示，想了想，还是首选Echarts，HighCharts和D3.js备用吧，
而项目中也用到了AngularJS，所以需要把Echarts引入到AngularJs中一起使用，
试了试，最方便的还是用指令，（虽然指令有点不好调，用了再说）。
1、引入angular.js
2、引入echarts.js
3、引入jquery.js---可以省略
4、直接上代码：
<!DOCTYPE html >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Echarts--柱状图与饼图</title>
<link rel="stylesheet" href="../jc/jquery-ui.css">
<script type="text/javascript" src="../jc/jquery.min.js"></script>
<script type="text/javascript" src="../jc/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jc/angular.min.js"></script>
<script type="text/javascript" src="../3rd/echarts/echarts.js"></script>
<style>
html{
height:100%;
} </style>
</head> <body data-ng-app="MyApp" style="height:100%;">
<div data-ng-controller='MyCtrl' style="width: 100%;height: 100%;">
<h3>Echarts柱状图与饼图---指令directive</h3> <div align="center" style="width: 80%; height:100%;">
<div align="left">
<select data-ng-model="chart"
data-ng-options="x for (x, y) in myCharts"
data-ng-change = "showChange(chart)"
>
</select>
</div> <div data-ng-show="show" bar-charts data-source='groupData' style="width: 100%;height: 80%;"></div>
<div data-ng-show="!show" pie-charts data-source='group' data-ng-repeat="group in groupData"
style="width: 30%;height:30%;float: left;">
</div>
</div>
</div>
<script>
angular.module('MyApp', [])
.controller('MyCtrl', function($scope) {
$scope.groupData = ['测试栏目1','测试栏目2','测试栏目3','测试栏目4','测试栏目5','测试栏目6'];
$scope.chart = 0;
$scope.show = true;
$scope.myCharts = {
"柱状图":0,
"饼图":1
};
$scope.showChange = function(chart){
if(chart==0){
$scope.show = true;
}else{
$scope.show = false;
}
};
})
.directive('barCharts',function(){
return{
restrict:'AE',
scope :{
source:'='
},
template:'<div>这是柱图</div>',
controller: function($scope){
},
link:function(scope,element,attr){
console.log(scope.source);
var chart = element.find('div')[0];
var parent = element['context'];
// console.log(parent.clientHeight+":"+parent.clientWidth);
chart.style.width =parent.clientWidth+'px';
chart.style.height =parent.clientHeight+'px'; var myChart = echarts.init(chart);
var option = {
title:{
text:'工作空间使用情况'
},
tooltip:{
trigger:'axis',
axisPointer:{
type:'shadow'
}
},
legend: {
//data:['正常','警告','预警','剩余']
},
gird:{
left: '5%',
right: '5%',
bottom: '5%',
containLabel: true
},
xAxis:{
type:'value'
},
yAxis:{
type: 'category',
data: scope.source //['测试栏目1','测试栏目2','测试栏目3','测试栏目4','测试栏目5','测试栏目6']
},
series:[
{
name:'已使用',
type:'bar',
stack:'存储空间',
label:{
normal:{
show:true,
position:'insideRight'
}
},
barWidth:'80%',
data:[100,200,300,260,50,120]
},
{
name:'剩余',
type:'bar',
stack:'存储空间',
label:{
normal:{
show:true,
position:'insideRight'
}
},
barWidth:'80%',
data:[200,100,2,80,200,180]
}
]
};
myChart.setOption(option);
myChart.resize();
}
};
})
.directive('pieCharts',function(){
return{
restrict:'AE',
scope :{
source:'='
},
template:'<div>这是饼图</div>',
controller: function($scope){
},
link:function(scope,element,attr){ var chart = element.find('div')[0];
var parent = element['context'];
//console.log(parent.clientHeight+":"+parent.clientWidth);
chart.style.width =parent.clientWidth+'px';
chart.style.height =parent.clientHeight+'px'; var myChart = echarts.init(chart);
var option = {
backgroudColor:'#F2F2F2',
title : {
text: '某一个栏目',
x:'center',
y:'bottom'
},
tooltip:{
trigger:'item',
formatter:'{a}<br/>{b} {c}({d}%)'
},
series:[
{
name:'空间使用',
type:'pie',
radius:'55%',
center:['50%','60%'],
data:[
{value:50,name:'已使用'},
{value:450,name:'未使用'}
],
itemStyle:{
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
myChart.resize();
}
};
});
</script>
</body> </html>
一个Demo，就不按格式写了！
以上！
自定义数据展示颜色：
series:[
{
name:'已使用',
type:'bar',
stack:'存储空间',
label:{
normal:{
show:true,
position:'insideRight'
}
},
barWidth:'80%',
data:[
{
value:100,
itemStyle:{
normal:{
color: 3>2 ? '#CDCD19':'#00FA67'
}
}
},
{
value:200,
itemStyle:{
normal:{
color: 1>2 ? '#CDCD19':'#00FA67'
}
}
},
{
value:300,
itemStyle:{
normal:{
color: 3>2 ? '#CDCD19':'#00FA67'
}
}
},
{
value:260,
itemStyle:{
normal:{
color: 1>2 ? '#CDCD19':'#00FA67'
}
}
},
50,120]
},
{
name:'剩余',
type:'bar',
stack:'存储空间',
label:{
normal:{
show:true,
position:'insideRight'
}
},
itemStyle:{
normal:{
color:'#CBCBCB'
}
},
barWidth:'80%',
data:[200,100,2,80,200,180]
}
]
-------------------------------
series:[
{
name:'空间使用',
type:'pie',
radius:'55%',
center:['50%','60%'],
data:[
{value:50,name:'已使用',itemStyle:{
normal:{
color:'#324A5B'
}
}},
{value:450,name:'未使用',itemStyle:{
normal:{
color:'#C13530'
}
}}
],
itemStyle:{
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
AngularJS引入Echarts的Demo的更多相关文章
- vue引入echarts、找不到的图表引入方法、图表中的点击事件
1.在vue-cli项目中添加webpack配置,本文引入的最新版本.在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维 ...
- vue按需引入echarts
下载安装echarts包:npm install echarts -D 一.全局引入 main.js中配置 import echarts from 'echarts' //引入echarts Vue. ...
- vue-webpack 引入echarts 注意事项
0.执行教程 https://www.cnblogs.com/goloving/p/8654176.html1.在index 中创建 div <!DOCTYPE html> <htm ...
- angular6.x 引入echarts
因为angular2+ 使用 ==typescript==开发,所以想要使用echarts,必须安装echarts针对angular的插件ngx-echarts.本文案列实际效果如上图. 安装ngx- ...
- mpvue中按需引入echarts
大家都知道小程序文件大小不能超过2M, 在项目中引入echarts后,文件大小远远超出2M了.因为echarts文件默认是包含所有图表代码的,所以文件体积会比较大.解决办法如下: 安装 首先我们先安装 ...
- 16、vue引入echarts，划中国地图
vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...
- 【React】react项目引入echarts插件 K线图
参考npm文档:https://www.npmjs.com/package/echarts-for-react 由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装 第一步: ...
- vue按需引入/全局引入echarts
npm install echarts -S 1.按需引入 新建echarts.js公共引入 // 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 ...
- 微信小程序引入ECharts组件
首先打开ECharts网页 https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8 ...
随机推荐
- Ubuntu下安装Pyenv不成功，求指教
虚拟机:VMware12.0 操作系统:Ubuntu16.04 LTS (新安装系统) 已经按照网上的步骤: 1.安装git: $sudo apt-get install git 2.安装依赖包: $ ...
- sql in按照指定顺序排序
如下 Select * FROM table1 ,,,,) order by field (3,5,1,4,2)
- linux线程同步(4)-自旋锁
自旋锁与互斥量功能一样,唯一一点不同的就是互斥量阻塞后休眠让出cpu,而自旋锁阻塞后不会让出cpu,会一直忙等待,直到得到锁!!! 自旋锁在用户态使用的比较少,在内核使用的比较多!自旋锁的使用场景:锁 ...
- Eclipse安装python注意事项
第一次用Eclipse来开发python,在安装环境时走了很多弯路,下面记录下正确的安装方法: 1.下载Eclipse与jdk.(注意jdk与Eclipse要么都是32位,要么都是64位) 2.安装好 ...
- CoCreateInstance调用COM接口伪流程
在编写组件程序时,经常会使用CoCreateInstance直接取COM组件的接口,非常方便,那CoCreateInstance到底干了些什么事呢?1.CoCreateInstance取COM组件的接 ...
- Booth Multiplication Algorithm [ASM-MIPS]
A typical implementation Booth's algorithm can be implemented by repeatedly adding (with ordinary un ...
- hdu3065 病毒侵袭持续中
题目地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=3065 题目: 病毒侵袭持续中 Time Limit: 2000/1000 MS (Java ...
- 在JAVA中ArrayList如何保证线程安全
[b]保证线程安全的三种方法:[/b]不要跨线程访问共享变量使共享变量是final类型的将共享变量的操作加上同步一开始就将类设计成线程安全的, 比在后期重新修复它,更容易.编写多线程程序, 首先保证它 ...
- 协议的分用以及wireshark对协议的识别
在TCP/IP详解一书中谈到了协议的分用,书中的图1-8如上.图1-8可以很好地解释在互联网的分层结构中,底层的协议头是如何承载上层的不同的协议的.对于链路层而言,以太网首部中有不同帧类型用于表示以太 ...
- iOS多线程之GCD详解
GCD(Grand Central Dispatch)是基于C语言开发的一套多线程开发机制.也是目前苹果官方推荐的多线程开发方法.iOS三种多线程开发中GCD是抽象层次最高的.当然用起来也是最简单的. ...