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 ...
随机推荐
- srping MVC 工程简单搭建
Spring版本:3.2.2.RELEASE 第一步:导入必须的jar包 spring-beans.jar spring-context.jar spring-core.jar spring-expr ...
- Hello, AnnsShadow!
Hello! 发现这个神奇的园子快一年了,自己的学习历程磕磕碰碰也过了一年了,想想,这么久了,是时候做些记录做个分享者了. 从一开始的只敢看Blog,到现在自己发表一下自己的所感所想,算是一种成长了吧 ...
- Toritoisegit记住用户名密码
TortoiseGit每次连接git都得输入密码了,如果我们用到的比较频繁这样是很麻烦的,那么下面我们来看一篇关于window设置TortoiseGit连接git不用每次输入用户名和密码的配置,具体的 ...
- MySQL性能优化经验
核心 不做运算 md5() Order By Rand() 控制单表数据量 保持表字段苗条 平衡范式与冗余 拒绝3B Big SQL Big Transaction Big Batch 字段 用好数值 ...
- MicroCube 风力发电装置
这个叫做 MicroCube 的发电装置其实是一套「小型风扇+发电机」的组合,能够输出三相交流电,之后转换成直流电给电池组充电. 一个 MicroCube 长宽高均为 23 厘米左右,重约 1.4 公 ...
- xsd.exe的使用
xsd.exe的使用 XML文件生成XSD文件 xsd myFile.xml /outputdir:myOutputDir XSD文件生存实体类 xsd <你的XSD路径>.xsd / ...
- php5.3 fastcgi方式 安装以及和nginx整合
注意:不要随便改变基础库的版本,否则会对别的软件产生编译错误 1.基础依赖包安装: cd /software/zlib- ./configure make make install cd /softw ...
- vlan协议及端口类型
一.VLAN协议 1.协议的应用 802.1Q协议,即Virtual Bridged Local Area Networks协议,主要规定了VLAN的实现. 2.协议结构 每一个支持802.1Q协议的 ...
- stm32中断无电平触发的解决办法
这几天在用stm32读取FPGA中FIFO里的数据,遇到了不少的问题.其中有个自己觉得比较好玩的问题,就拿出来写写.其实这个问题也比较简单,开始我觉得没必要拿出来写,不过,想想后觉得还是写写吧,就当做 ...
- 虚拟机安装的UBUNTU怎么全屏
虚拟机下面安装了ubuntu系统,显示的屏幕只有那么一小块儿,不知道如何才能全屏,那么如何全屏呢?且看下面经验. 步骤阅读 百度经验:jingyan.baidu.com 方法/步骤 1 打开虚拟机 ...