最近要用到图表展示，想了想，还是首选Echarts，HighCharts和D3.js备用吧，

而项目中也用到了AngularJS，所以需要把Echarts引入到AngularJs中一起使用，

试了试，最方便的还是用指令，（虽然指令有点不好调，用了再说）。

1、引入angular.js

2、引入echarts.js

3、引入jquery.js---可以省略

4、直接上代码：

  1.  <!DOCTYPE html >
  2.    <head>
  3.      <meta charset="utf-8">
  4.      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  5.      <title>Echarts--柱状图与饼图</title>
  6.      <link rel="stylesheet" href="../jc/jquery-ui.css">
  7.       <script type="text/javascript" src="../jc/jquery.min.js"></script>
  8.      <script type="text/javascript" src="../jc/jquery-ui.min.js"></script>
  9.      <script type="text/javascript" src="../jc/angular.min.js"></script>
  10.        <script type="text/javascript" src="../3rd/echarts/echarts.js"></script>
  11.        <style>
  12.            html{
  13.                height:100%;
  14.            }
  15.  
  16.        </style>
  17.    </head>
  18.  
  19.    <body data-ng-app="MyApp" style="height:100%;">
  20.      <div data-ng-controller='MyCtrl' style="width: 100%;height: 100%;">
  21.      <h3>Echarts柱状图与饼图---指令directive</h3>        
  22.  
  23.      <div align="center" style="width: 80%; height:100%;">
  24.          <div align="left">
  25.              <select data-ng-model="chart"
  26.              data-ng-options="x for (x, y) in myCharts"
  27.              data-ng-change = "showChange(chart)"
  28.              >
  29.              </select>
  30.          </div>
  31.  
  32.          <div data-ng-show="show" bar-charts  data-source='groupData' style="width: 100%;height: 80%;"></div>
  33.          <div data-ng-show="!show" pie-charts  data-source='group' data-ng-repeat="group in groupData"
  34.                  style="width: 30%;height:30%;float: left;">
  35.          </div>
  36.      </div>
  37.      </div>
  38.      <script>
  39.        angular.module('MyApp', [])
  40.        .controller('MyCtrl', function($scope) {
  41.            $scope.groupData = ['测试栏目1','测试栏目2','测试栏目3','测试栏目4','测试栏目5','测试栏目6'];
  42.            $scope.chart = 0;
  43.            $scope.show = true;
  44.            $scope.myCharts = {
  45.                  "柱状图":0,
  46.                  "饼图":1
  47.            };
  48.            $scope.showChange = function(chart){
  49.                if(chart==0){
  50.                     $scope.show = true;
  51.                }else{
  52.                    $scope.show = false;
  53.                }
  54.              };
  55.        })
  56.        .directive('barCharts',function(){
  57.          return{
  58.              restrict:'AE',
  59.                scope :{
  60.                    source:'='
  61.                },
  62.                template:'<div>这是柱图</div>',
  63.                controller: function($scope){
  64.                },
  65.                link:function(scope,element,attr){
  66.                    console.log(scope.source);
  67.                    var chart =  element.find('div')[0];
  68.                    var parent = element['context'];
  69.                //    console.log(parent.clientHeight+":"+parent.clientWidth);
  70.                    chart.style.width =parent.clientWidth+'px';
  71.                    chart.style.height =parent.clientHeight+'px';
  72.  
  73.                    var myChart = echarts.init(chart);
  74.                    var option = {
  75.                          title:{
  76.                              text:'工作空间使用情况'
  77.                          },
  78.                          tooltip:{
  79.                              trigger:'axis',
  80.                              axisPointer:{
  81.                                  type:'shadow'
  82.                              }
  83.                          },
  84.                          legend: {
  85.                              //data:['正常','警告','预警','剩余']
  86.                          },
  87.                          gird:{
  88.                              left: '5%',
  89.                              right: '5%',
  90.                              bottom: '5%',
  91.                              containLabel: true
  92.                          },
  93.                          xAxis:{
  94.                              type:'value'
  95.                          },
  96.                          yAxis:{
  97.                              type: 'category',
  98.                              data: scope.source  //['测试栏目1','测试栏目2','测试栏目3','测试栏目4','测试栏目5','测试栏目6']
  99.                          },
  100.                          series:[
  101.                              {
  102.                                  name:'已使用',
  103.                                  type:'bar',
  104.                                  stack:'存储空间',
  105.                                  label:{
  106.                                      normal:{
  107.                                          show:true,
  108.                                          position:'insideRight'
  109.                                      }
  110.                                  },
  111.                                  barWidth:'80%',
  112.                                  data:[100,200,300,260,50,120]
  113.                              },
  114.                              {
  115.                                  name:'剩余',
  116.                                  type:'bar',
  117.                                  stack:'存储空间',
  118.                                  label:{
  119.                                      normal:{
  120.                                          show:true,
  121.                                          position:'insideRight'
  122.                                      }
  123.                                  },
  124.                                  barWidth:'80%',
  125.                                  data:[200,100,2,80,200,180]
  126.                              }
  127.                          ]
  128.                      };
  129.                    myChart.setOption(option);
  130.                    myChart.resize();
  131.                }
  132.          };
  133.        })
  134.        .directive('pieCharts',function(){
  135.            return{
  136.                  restrict:'AE',
  137.                    scope :{
  138.                        source:'='
  139.                    },
  140.                    template:'<div>这是饼图</div>',
  141.                    controller: function($scope){
  142.                    },
  143.                    link:function(scope,element,attr){
  144.  
  145.                        var chart =  element.find('div')[0];
  146.                        var parent = element['context'];
  147.                        //console.log(parent.clientHeight+":"+parent.clientWidth);
  148.                        chart.style.width =parent.clientWidth+'px';
  149.                        chart.style.height =parent.clientHeight+'px';
  150.  
  151.                        var myChart = echarts.init(chart);
  152.                         var option = {
  153.                            backgroudColor:'#F2F2F2',
  154.                             title : {
  155.                                text: '某一个栏目',
  156.                                x:'center',
  157.                                y:'bottom'
  158.                            },
  159.                            tooltip:{
  160.                                trigger:'item',
  161.                                formatter:'{a}<br/>{b} {c}({d}%)'
  162.                            },
  163.                            series:[
  164.                                  {
  165.                                      name:'空间使用',
  166.                                      type:'pie',
  167.                                      radius:'55%',
  168.                                      center:['50%','60%'],
  169.                                      data:[
  170.                                          {value:50,name:'已使用'},
  171.                                          {value:450,name:'未使用'}
  172.                                      ],
  173.                                      itemStyle:{
  174.                                          emphasis: {
  175.                                              shadowBlur: 10,
  176.                                              shadowOffsetX: 0,
  177.                                              shadowColor: 'rgba(0, 0, 0, 0.5)'
  178.                                          }
  179.                                      }
  180.                                  }
  181.                            ]
  182.                         };
  183.                        myChart.setOption(option);
  184.                        myChart.resize();
  185.                    }
  186.            };
  187.        });
  188.      </script>
  189.    </body>
  190.  
  191.  </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的更多相关文章

  1. vue引入echarts、找不到的图表引入方法、图表中的点击事件

    1.在vue-cli项目中添加webpack配置,本文引入的最新版本.在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维 ...

  2. vue按需引入echarts

    下载安装echarts包:npm install echarts -D 一.全局引入 main.js中配置 import echarts from 'echarts' //引入echarts Vue. ...

  3. vue-webpack 引入echarts 注意事项

    0.执行教程 https://www.cnblogs.com/goloving/p/8654176.html1.在index 中创建 div <!DOCTYPE html> <htm ...

  4. angular6.x 引入echarts

    因为angular2+ 使用 ==typescript==开发,所以想要使用echarts,必须安装echarts针对angular的插件ngx-echarts.本文案列实际效果如上图. 安装ngx- ...

  5. mpvue中按需引入echarts

    大家都知道小程序文件大小不能超过2M, 在项目中引入echarts后,文件大小远远超出2M了.因为echarts文件默认是包含所有图表代码的,所以文件体积会比较大.解决办法如下: 安装 首先我们先安装 ...

  6. 16、vue引入echarts，划中国地图

    vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...

  7. 【React】react项目引入echarts插件 K线图

    参考npm文档:https://www.npmjs.com/package/echarts-for-react 由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装 第一步: ...

  8. vue按需引入/全局引入echarts

    npm install echarts -S 1.按需引入 新建echarts.js公共引入 // 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 ...

  9. 微信小程序引入ECharts组件

    首先打开ECharts网页 https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8 ...

随机推荐

  1. corefile 设置

    程序运行的过程中,可能会因为一些隐藏的bug导致崩溃,为了在出问题时,及时记录所在环境的情况,所以要设置core文件的产生.其实其本质就是把进程的内存保存到文件中去. 1.core文件的生成开关和大小 ...

  2. 景瑞地产商业智能BI整体实施过程

    1.1行业背景 1.1.1景瑞地产 景瑞地产成立于1993年,专注于房地产开发,并一直秉持“永远诚信.恪守专业.锐意进取.共赢未来”的核心价值观和“舒适之道”的企业使命. 景瑞地产,源自上海.通过多年 ...

  3. 浏览器默认样式(user agent stylesheet)+cssreset

    每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染.这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整 ...

  4. [转]VS2010中如何创建一个WCF

    本文转自:http://www.cnblogs.com/zhangliangzlee/archive/2012/08/28/2659701.html 转载:http://www.cnblogs.com ...

  5. Java的各种工具类

    下面是java的各种工具,包括获取时间和时间比较,检验集合和字符串是否为空和长度大小等等 1 import java.io.BufferedReader; import java.io.File; i ...

  6. Appium学习实践（四）结构优化

    随着我们测试脚本中的用例越来越多,我们不可能将所有的用例都放在同一个脚本中,所以我们需要优化我们的结构.将脚本放在一个文件夹中,再通过别的脚本来执行脚本.这样,我们也可以有选择性的执行我们的脚本 先来 ...

  7. JavaSE之概述与基本语法

    嘛,这个本来应该发在OOP之前的,无所谓了,补发一下,这篇文章只会对JavaSE的语法做一个基本的概述而已,我会在最近新开一个新坑,也就是JavaEE系列,以后还会有Cpp(相对于C++,我还是更喜欢 ...

  8. AngularJs定制样式插入到ueditor中的问题总结

    总结一下自己给编辑器定制样式的过程中所遇到的问题,主要是编辑器的二次开发接口,以及用angular定制样式,问题不少,终于在**的帮助下,完成了,还剩下老版本和新版本的交互没有弄好,不过不难.下面分别 ...

  9. POJ3107Godfather[树形DP 树的重心]

    Godfather Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 6121   Accepted: 2164 Descrip ...

  10. CF 676B Pyramid of Glasses[模拟]

    B. Pyramid of Glasses time limit per test 1 second memory limit per test 256 megabytes input standar ...