zoukankan      html  css  js  c++  java
  • angular把echarts封装为指令(配合requirejs)

    1、在require中配置echartsjs文件

    2、在directives下定义指令(定义为全局的指令,任何页面调用都可以)

    define(['app','echarts'],function(app,echarts){
        app.register.directive('bar',function(){
               return {
                scope: {
                    legend: "=",
                    item: "=",
                    data: "="
                },
                restrict: 'EA',
                template: '<div id="barId" style="400px;border:2px solid blue;height:400px;float:left;"></div>',
                replace: true,
               link: function($scope, iElm, iAttrs, controller) {
                   var option = {
                       tooltip: {
                           show: true,
                           trigger: "axis"
                       },
                       legend: {
                           data:$scope.legend
                       },
                       xAxis: [{
                           type: 'value'
                       }],
                       yAxis: [{
                           type: 'category',
                           data: $scope.item
                       }],
                       series: function() {
                           var serie = [];
                           for (var i = 0; i < $scope.legend.length; i++) {
                               var item = {
                                   name: $scope.legend[i],
                                   type: 'bar',
                                   data: $scope.data[i]
                               };
                               serie.push(item);
                           }
                           return serie;
                       }()
                   };
                   var myChart = echarts.init(document.getElementById('barId'),'macarons');
                    myChart.setOption(option);
                }
            };
        })
    
    });

    3、路由配置的时候需要注入指令

    4、页面调用指令

          注:“=”后面的值可以自定义名称、但要和controller中定义的$scope.后的值对应

    5、controller中定义数据:本例中写的假数据(可异步获取)

            

     

    6、页面效果


     

  • 相关阅读:
    Java异常
    docker安装和介绍(基于centos 7)
    centos7搭建gitlab版本控制系统
    webstorm快捷键使用
    Extjs-note
    mak iso
    windows上的硬盘挂载到linux上的步骤方法
    【JAVA笔记——术】JSP中乱码问题的解决方法
    PHP获得IP方式
    ubuntu安装hadoop 若干问题的解决
  • 原文地址:https://www.cnblogs.com/qiyecao/p/7026603.html
Copyright © 2011-2022 走看看