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 ...
随机推荐
- 使用 python 发送邮件
1.使用python 写发邮箱代码: def sendmail (): import smtplib from email.mime.text import MIMEText from email.u ...
- 入门级的按键驱动——按键驱动笔记之poll机制-异步通知-同步互斥阻塞-定时器防抖
文章对应视频的第12课,第5.6.7.8节. 在这之前还有查询方式的驱动编写,中断方式的驱动编写,这篇文章中暂时没有这些类容.但这篇文章是以这些为基础写的,前面的内容有空补上. 按键驱动——按下按键, ...
- 使用C#向后台ACCESS数据库添加数据
Microsoft Office Access是由微软发布的关系数据库管理系统.它结合了 MicrosoftJet Database Engine 和 图形用户界面两项特点,是 Microsoft O ...
- C#小游戏（文字对战游戏）
第一代,不是很完善,会在后续增加更多的功能 主: using System; using System.Collections.Generic; using System.Linq; using Sy ...
- 转：HTML网页中插入视频各种方法
现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...
- Android驱动入门-LED--HAL硬件抽象层程序设计①
硬件平台: FriendlyARM Tiny4412 Cortex-A9 操作系统: UBUNTU 14.04 LTS 时间:2016-09-21 16:15:26 设计HAL硬件抽象层程序,则需要 ...
- SQL Server系统表sysobjects介绍与使用（转））
这就让sysobjects表格有了用武之地.虽然我不建议你更新这个表格,但是你当然有权对其进行审查. sysobjects 表 在数据库内创建的每个对象(约束.默认值.日志.规则.存储过程等)在表中 ...
- fiddler和xampp安装成功后,网站打不开的原因
fiddler和xampp安装成功后,网站打不开,出现403的错误 解决办法 编辑httpd.conf文件注释掉以下代码 #AllowOverride none # Require all denie ...
- MySQL导入sql脚本错误：2006 - MySQL server has gone away
到如一些小脚本很少报错,但最近导入一个10+M的SQL脚本,却重复报错: Error occured at:2014-03-24 11:42:24 Line no.:85 Error Code: 20 ...
- 统计：P值 & α值
来源:知乎:P值与α值的关系 一楼 P是"拒绝原假设时犯错误概率"又或者说是"如果你拒绝掉原假设实际上是在冤枉好人的概率". 不管怎么表达理解上都有点绕,所以你 ...