angularjs通过指令方式引用echarts

Dear 丶 2022-04-13 10:52 262阅读 0赞

1.  index.html引入

1.  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);
        }
      };
    });

1.  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 中使用指令可滚动

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