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、页面效果


     

  • 相关阅读:
    GridView
    母版页
    Ajax完整结构和删除
    Ajax1
    JQuery动画
    JQuery基础
    LinQ高级查询
    C#简单的学籍管理系统(数据库变更由原来的SQLserver改为SqLite)
    C#两个数只能进行+1,-1,*2操作。求使得两个数相等的最小步骤
    C#求最小公倍数与最大公约数
  • 原文地址:https://www.cnblogs.com/qiyecao/p/7026603.html
Copyright © 2011-2022 走看看