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 ...
随机推荐
- asp.net 后台 Http POST请求
时间忙,简单些,直接贴代码上图 百度站长平台为站长提供链接提交通道,您可以提交想被百度收录的链接,百度搜索引擎会按照标准处理 http://zhanzhang.baidu.com/linksubmit ...
- WIN 下的超动态菜单（一）
WIN 下的超动态菜单(一)介绍 WIN 下的超动态菜单(二)用法 WIN 下的超动态菜单(三)代码 作者:黄山松,发表于博客园:http://www.cnblogs.com/tomview/ ...
- CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]
一.前言 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...
- [转]TextArea设置MaxLength属性最大输入值的js代码
标准的DHTML文档中TEXTAREA的MAXLENGTH属性默认情况下不起作用,只有当事件发生时才起作用 如下:http://spiderscript.net/site/spiderscript/e ...
- 浅析Java中的访问权限控制
浅析Java中的访问权限控制 今天我们来一起了解一下Java语言中的访问权限控制.在讨论访问权限控制之前,先来讨论一下为何需要访问权限控制.考虑两个场景: 场景1:工程师A编写了一个类ClassA,但 ...
- NOIP2000单词接龙[DFS]
题目描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的“龙”(每个单词都最多在“龙”中出现两次),在两个单词相连时,其重合 ...
- Nginx反向代理、负载均衡、页面缓存、URL重写及读写分离详解
大纲 一.前言 二.环境准备 三.安装与配置Nginx 四.Nginx之反向代理 五.Nginx之负载均衡 六.Nginx之页面缓存 七.Nginx之URL重写 八.Nginx之读写分离 注,操作系统 ...
- webstrom快捷键速查
编辑 Ctrl + Space 基本代码完成 (任何类. 方法或变量名称)Ctrl + Shift + Enter 完整的语句Ctrl + P (在方法调用参数) 内的参数信息Ctrl + Q 快速的 ...
- 准备NOIP2017 最长公共子序列（模版）
一些概念: (1)子序列: 一个序列A ＝ a1,a2,--an,中任意删除若干项,剩余的序列叫做A的一个子序列.也可以认为是从序列A按原顺序保留任意若干项得到的序列.例如: 对序列 1,3,5, ...
- Codevs 1506 传话（floyd大法好）。
1506 传话 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题解 题目描述 Description 一个朋友网络,如果a认识b,那么如果a第 ...