angularjs通过指令方式引用echarts

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jbguo/article/details/84612241

1. index.html引入

  <script src="lib/echarts//echarts.js"></script>
  <script src="lib/echarts/walden.js"></script>

2. directive.js 指令含饼图，柱图，折线图

.directive('pieCharts', function($parse, $interval){
  'use strict';
  return {
    restrict: 'AE',
    // replace: true,
    scope: {
      options: '=',
    },
    template: '<div>这是饼图</div>',
    controller: function ($scope) {
    },
    link: function(scope, element, attrs) {
      let chart = element.find('div')[0];
      let parent = element[0];
      //    console.log(parent.clientHeight+":"+parent.clientWidth);
      chart.style.width = parent.clientWidth + 'px';
      chart.style.height = parent.clientHeight + 'px';

      let myChart = echarts.init(element[0], 'walden');
      window.addEventListener('resize', function () {
        myChart.resize();//监测图表自适应
      });

      scope.$watch('options', function (n, o) {
        if (typeof (n) === 'object') {
          myChart.setOption(scope.options);
        }
      }, true);

    }
  };
})

.directive('barCharts', function () {
  'use strict';
  return {
    restrict: 'AE',
    scope: {
      // source: '=',
      options: '=',
      parentwidth: '='
    },
    template: '<div>这是柱图</div>',
    controller: function ($scope) {
    },
    link: function (scope, element, attr) {
      // console.log(scope.source);
      let chart = element.find('div')[0];
      let parent = element[0];
      //    console.log(parent.clientHeight+":"+parent.clientWidth);
      if (scope.parentwidth) {
        parent.style.width = scope.parentwidth;
      }
      chart.style.width = parent.clientWidth + 'px';
      chart.style.height = parent.clientHeight + 'px';

      let myChart = echarts.init(chart, 'walden');
      window.addEventListener('resize', function () {
        myChart.resize();//监测图表自适应
      });

      scope.$watch('options', function (n, o) {
        if (typeof (n) === 'object') {
          myChart.setOption(scope.options);
        }
      }, true);
    }
  };
})

.directive('lineCharts', function($parse, $interval){
  'use strict';
  return {
    restrict: 'AE',
    // replace: true,
    scope: {
      options: '=',
      parentwidth: '='
    },
    template: '<div>这是折线图</div>',
    controller: function ($scope) {
    },
    link: function(scope, element, attrs) {
      let chart = element.find('div')[0];
      let parent = element[0];
      //    console.log(parent.clientHeight+":"+parent.clientWidth);
      if (scope.parentwidth) {
        parent.style.width = scope.parentwidth;
      }
      chart.style.width = parent.clientWidth + 'px';
      chart.style.height = parent.clientHeight + 'px';

      let myChart = echarts.init(element[0], 'walden');
      window.addEventListener('resize', function () {
        myChart.resize();//监测图表自适应
      });

      scope.$watch('options', function (n, o) {
        if (typeof (n) === 'object') {
          myChart.setOption(scope.options);
        }
      }, true);
    }
  };
});

3. demo.js 添加配置

monthOptions: {
  // color: ['#a3d4ff'],
  tooltip : {
    trigger: 'axis'
  },
  xAxis : [
    {
      type : 'category',
      data: _.map(sourceMonth, item => {
        return `${item}月`;
      })
    }
  ],
  yAxis : [
    {
      type : 'value'
    }
  ],
  series : [
    {
      name:'按月查看',
      type:'bar',
      label: {
        normal: {
          formatter: '{c}人',
          show: true,
          position: 'top'
        }
      },
      data:['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-']
    }
  ]
};

teamOptions: {
  title : {
    text: '当前在场人数:0',
    x:'center',
    y: 'bottom'
  },
  tooltip : {
    trigger: 'item',
    formatter: '{c}人 ({d}%) <br/> {b}',
    confine: true,
  },
  minAngle: 5,           　　 //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
  avoidLabelOverlap: true,   //是否启用防止标签重叠策略
  series : [
    {
      name: '按班组',
      type: 'pie',
      radius: ['25%', '45%'],
      label: {
        normal: {
          // formatter: '{c}人 ({d}%) \n {b}',
          formatter(v) {
            console.log(v.value);
            let name = v.name;
            let text = v.value + '人(' + v.percent + '%)' + '\n' 
            if (name.length <= 8) {
              name = name;
            } else {
              name = `${name.slice(0, 8)}...`
            }
            return text + name;
          },
          textStyle: {
            fontSize: 8
          }
        },
        confine: true
      },
      data:[]
    }
  ]
},

options: {
  // color: ['#2f4554', '#d48265', '#61a0a8'],
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data:['实发总薪资','在线发放薪资', '台账小计薪资'],
    y: 'bottom'
  },
  xAxis: {
    type: 'category',
    data:  _.map(sourceMonth, item => {
      return `${item}月`;
    })
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name:'实发总薪资',
      type:'line',
      data:['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-']
    },
    {
      name:'在线发放薪资',
      type:'line',
      data:['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-']
    },
    {
      name:'台账小计薪资',
      type:'line',
      data:['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-']
    }
  ]
},

4.demo.html 中使用指令可滚动

<div style="overflow: scroll">
   <div bar-charts options="attendance.monthOptions" parentwidth="'600px'" style="width: 100%;height:300px;overflow: scroll"></div>
</div>
<div ng-show="crumbs[0].active">
  <div pie-charts options="inNumber.teamOptions" style="width: 100%;height:300px;"></div>
</div>
<div style="overflow: scroll">
  <div line-charts options="detail.options" parentwidth="'600px'" style="width: 100%;height:300px;overflow: scroll"></div>
</div>

遇到的问题：
let parent = element[‘context’]; 需要引入jquery 1.x版本可正常显示echarts,但是会导致移动端其他组件的滑动事件失效
改为 let parent = element[0];不需要依赖jquery