143、angular1与echarts关联（onmovemouse出现新图片）

发布时间：2020-12-17 07:05:57 所属栏目：安全来源：网络整理
导读：angular1与echarts关联（onmovemouse出现新图片） ! DOCTYPE html html lang ="en" ng-app ="myModel" head meta charset ="UTF-8" title select / title script src ="https://cdn.bootcss.com/echarts/3.7.1/echarts.js" / script script src ="https://cd
angular1与echarts关联（onmovemouse出现新图片）
<!DOCTYPE html>
<html lang="en" ng-app="myModel">
<head>
    <meta charset="UTF-8">
    <title>select</title>
    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.6.2/angular.js"></script>
</head>
<body>
<div ng-controller="firstCtrl">
        <div style="width:100%;display:flex;">
            <div style="width:50%;display:flex;flex-direction:column;" id="left">
            </div>
            <div style="width:50%;display:flex;flex-direction:column;" id="right">
            </div>
        </div>
</div> 
</body> 
</html>
<script> 
    var app = angular.module(‘myModel‘,[]); 
    app.controller(‘firstCtrl‘,function ($scope,$compile,$rootScope) { 
        var array = [0,0,0];
      angular.element(‘#left‘).empty();
      for (var j = 0; j < array.length; j++) {
        angular.element(‘#left‘).append(
          $compile(angular.element(‘<div id="left‘ + j + ‘" style="width:100%;height:200px;"> <div>‘))(angular.extend($rootScope.$new()))
        );
        eval(‘var totalFlowRate‘ + j + ‘= echarts.init(document.getElementById("left‘ + j + ‘"))‘);
      }
      var xAxisData = [];
      var yAxisData = [];
      for (var i = 100; i > 0; i--) {
        xAxisData.push(i + ‘秒前‘);
      }
      for (i = 1; i < 101; i++) {
        yAxisData.push(Math.round(Math.random() * 1000));
      }
      yAxisData.push(Math.round(Math.random() * 1000));
      yAxisData.shift();
      var fullOption = {
        backgroundColor: ‘#ffffff‘,animation: false,title: {
          bottom: ‘150px‘,text: ‘‘,textStyle: {
            fontWeight: ‘lighter‘,fontSize: ‘14px‘
          }
        },tooltip: {
          trigger: ‘axis‘,axisPointer: {
            type: ‘cross‘
          }
        },grid: {
          left: 50,right: 15
        },legend: {
          /*  
          data: [‘当前流量‘],textStyle: { color: ‘#66b3ff‘ } *//*图例(legend)说明文字的颜色
          */
        },xAxis: {
          boundaryGap: false,data: xAxisData,splitLine: { show: true }/*网格线*/
        },yAxis: {
          boundaryGap: false,series: {
          /*itemStyle: {normal: {areaStyle: {type: ‘default‘}}},*/
          itemStyle: {
            normal: {
              lineStyle: {
                color: ‘#92c2ff‘/*折线的颜色*/
              },color: ‘#66b3ff‘/*图例(legend)的颜色,不是图例说明文字的颜色*/
            }
          },areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,1,[
                  { offset: 0,color: ‘#66b3ff‘ },{ offset: 1,color: ‘#ecf5ff‘ }
                ]
              )
            }
          },symbol: ‘none‘,/*去掉小圆点*/
          name: ‘当前流量‘,type: ‘line‘,data: yAxisData/*,smooth:true//显示为平滑的曲线*/
        }
      };
      //无节流，无bug
      var title = [‘总流量（kbps）1‘,‘总流量（kbps）2‘,‘总流量（kbps）3‘,‘总流量（kbps）4‘,‘总流量（kbps）5‘];
      for (var jj = 0; jj < array.length; jj++) {
        eval(‘var fullOption‘ + jj + ‘=angular.copy(fullOption)‘);
        eval(‘fullOption‘ + jj + ‘.title.text = title[jj]‘);
        eval(‘totalFlowRate‘ + jj).setOption(eval(‘fullOption‘ + jj));
        eval(‘totalFlowRate‘ + jj).getZr().on(‘mousemove‘,function () {     
          var index = this.painterRoot.id.replace(‘left‘,‘‘);    
            eval(‘fullOption‘ + index).backgroundColor = ‘#F6F8FC‘;
            eval(‘totalFlowRate‘ + index).setOption(eval(‘fullOption‘ + index));
            angular.element(‘#right‘).empty();
            for (var j = 10; j < array.length + 11; j++) {
              angular.element(‘#right‘).append(
                $compile(angular.element(‘<div id="right‘ + j + ‘" style="width:100%;height:200px;"> <div>‘))(angular.extend($rootScope.$new()))
              );
              eval(‘var totalFlowRate‘ + j + ‘= echarts.init(document.getElementById("right‘ + j + ‘"))‘);
            }
                        //此处向后台发送请求：开始
            $scope.sendserver = function () {
              for (var jj = 10; jj < array.length + 11; jj++) {
                eval(‘var fullOption‘ + jj + ‘=angular.copy(fullOption)‘);
                eval(‘fullOption‘ + jj).title.text = title[jj - 10];
                eval(‘fullOption‘ + jj).backgroundColor = ‘#F6F8FC‘;
                eval(‘totalFlowRate‘ + jj).setOption(eval(‘fullOption‘ + jj));
              }
            };
            $scope.sendserver();
            //此处向后台发送请求：结束
        });
        eval(‘totalFlowRate‘ + jj).getZr().on(‘mouSEOut‘,function () { 
          var index = this.painterRoot.id.replace(‘left‘,‘‘); 
            eval(‘fullOption‘ + index).backgroundColor = ‘#ffffff‘;
            eval(‘totalFlowRate‘ + index).setOption(eval(‘fullOption‘ + index));
            angular.element(‘#right‘).empty();
         
        });
      } 
        /*
        //节流，有bug
      var title = [‘总流量（kbps）1‘,‘总流量（kbps）2‘,‘总流量（kbps）3‘,‘总流量（kbps）4‘,‘总流量（kbps）5‘];
      var throttle = function (delay,action) {
        var last = 0;
        return function () {
          var curr = +new Date();
          if (curr - last > delay) {
            action.apply(this,arguments);
            last = curr;
          }
        };
      };
      var action = function () {
        var index = this.painterRoot.id.replace(‘left‘,‘‘);
        eval(‘fullOption‘ + index).backgroundColor = ‘#F6F8FC‘;
        eval(‘totalFlowRate‘ + index).setOption(eval(‘fullOption‘ + index));
        angular.element(‘#right‘).empty();
        for (var j = 10; j < array.length + 11; j++) {
          angular.element(‘#right‘).append(
            $compile(angular.element(‘<div id="right‘ + j + ‘" style="width:100%;height:200px;"> <div>‘))(angular.extend($rootScope.$new()))
          );
          eval(‘var totalFlowRate‘ + j + ‘= echarts.init(document.getElementById("right‘ + j + ‘"))‘);
        }
        //此处向后台发送请求：开始
        $scope.sendserver = function () {
          for (var jj = 10; jj < array.length + 11; jj++) {
            eval(‘var fullOption‘ + jj + ‘=angular.copy(fullOption)‘);
            eval(‘fullOption‘ + jj).title.text = title[jj - 10];
            eval(‘fullOption‘ + jj).backgroundColor = ‘#F6F8FC‘;
            eval(‘totalFlowRate‘ + jj).setOption(eval(‘fullOption‘ + jj));
          }
        };
        $scope.sendserver();
        //此处向后台发送请求：结束
      };
      var fn = throttle(200,action);
      for (var jj = 0; jj < array.length; jj++) {
        eval(‘var fullOption‘ + jj + ‘=angular.copy(fullOption)‘);
        eval(‘fullOption‘ + jj + ‘.title.text = title[jj]‘);
        eval(‘totalFlowRate‘ + jj).setOption(eval(‘fullOption‘ + jj));
        eval(‘totalFlowRate‘ + jj).getZr().on(‘mousemove‘,fn);
        eval(‘totalFlowRate‘ + jj).getZr().on(‘mouSEOut‘,function () {
          var index = this.painterRoot.id.replace(‘left‘,‘‘);
          eval(‘fullOption‘ + index).backgroundColor = ‘#ffffff‘;
          eval(‘totalFlowRate‘ + index).setOption(eval(‘fullOption‘ + index));
          angular.element(‘#right‘).empty();
        });
      } */
      /*
      //节流，有bug
      var title = [‘总流量（kbps）1‘,‘总流量（kbps）5‘];
       var throttle = function (delay,action) {
         var last = 0;
         return function () {
           var curr = +new Date();
           if (curr - last > delay) {
             action.apply(this,arguments);
             last = curr;
           }
         };
       };
       var action = function (params) {
         var pointInPixel = [params.offsetX,params.offsetY];
         var index = this.painterRoot.id.replace(‘left‘,‘‘);
         if (eval(‘totalFlowRate‘ + index).containPixel(‘grid‘,pointInPixel)) {
           eval(‘fullOption‘ + index).backgroundColor = ‘#F6F8FC‘;
           eval(‘totalFlowRate‘ + index).setOption(eval(‘fullOption‘ + index));
           angular.element(‘#right‘).empty();
           for (var j = 10; j < array.length + 11; j++) {
             angular.element(‘#right‘).append(
               $compile(angular.element(‘<div id="right‘ + j + ‘" style="width:100%;height:200px;"> <div>‘))(angular.extend($rootScope.$new()))
             );
             eval(‘var totalFlowRate‘ + j + ‘= echarts.init(document.getElementById("right‘ + j + ‘"))‘);
           }
           //此处向后台发送请求：开始
           $scope.sendserver = function () {
             for (var jj = 10; jj < array.length + 11; jj++) {
               eval(‘var fullOption‘ + jj + ‘=angular.copy(fullOption)‘);
               eval(‘fullOption‘ + jj).title.text = title[jj - 10];
               eval(‘fullOption‘ + jj).backgroundColor = ‘#F6F8FC‘;
               eval(‘totalFlowRate‘ + jj).setOption(eval(‘fullOption‘ + jj));
             }
           };
           $scope.sendserver();
           //此处向后台发送请求：结束
         }
       };
       var fn = throttle(200,action);
       for (var jj = 0; jj < array.length; jj++) {
         eval(‘var fullOption‘ + jj + ‘=angular.copy(fullOption)‘);
         eval(‘fullOption‘ + jj + ‘.title.text = title[jj]‘);
         eval(‘totalFlowRate‘ + jj).setOption(eval(‘fullOption‘ + jj));
         eval(‘totalFlowRate‘ + jj).getZr().on(‘mousemove‘,fn);
         eval(‘totalFlowRate‘ + jj).getZr().on(‘mouSEOut‘,function (params) {
           var pointInPixel = [params.offsetX,params.offsetY];
           var index = this.painterRoot.id.replace(‘left‘,‘‘);
           if (!eval(‘totalFlowRate‘ + index).containPixel(‘grid‘,pointInPixel)) {
             eval(‘fullOption‘ + index).backgroundColor = ‘#ffffff‘;
             eval(‘totalFlowRate‘ + index).setOption(eval(‘fullOption‘ + index));
             angular.element(‘#right‘).empty();
           }
         });
       } */
      /*
      //不节流，有bug
      var title = [‘总流量（kbps）1‘,‘总流量（kbps）5‘];
      for (var jj = 0; jj < array.length; jj++) {
        eval(‘var fullOption‘ + jj + ‘=angular.copy(fullOption)‘);
        eval(‘fullOption‘ + jj + ‘.title.text = title[jj]‘);
        eval(‘totalFlowRate‘ + jj).setOption(eval(‘fullOption‘ + jj));
        eval(‘totalFlowRate‘ + jj).getZr().on(‘mousemove‘,function (params) {
          var pointInPixel = [params.offsetX,params.offsetY];
          var index = this.painterRoot.id.replace(‘left‘,‘‘);
          if (eval(‘totalFlowRate‘ + index).containPixel(‘grid‘,pointInPixel)) {
            eval(‘fullOption‘ + index).backgroundColor = ‘#F6F8FC‘;
            eval(‘totalFlowRate‘ + index).setOption(eval(‘fullOption‘ + index));
            angular.element(‘#right‘).empty();
            for (var j = 10; j < array.length + 11; j++) {
              angular.element(‘#right‘).append(
                $compile(angular.element(‘<div id="right‘ + j + ‘" style="width:100%;height:200px;"> <div>‘))(angular.extend($rootScope.$new()))
              );
              eval(‘var totalFlowRate‘ + j + ‘= echarts.init(document.getElementById("right‘ + j + ‘"))‘);
            }
            //此处向后台发送请求：开始
            $scope.sendserver = function () {
              for (var jj = 10; jj < array.length + 11; jj++) {
                eval(‘var fullOption‘ + jj + ‘=angular.copy(fullOption)‘);
                eval(‘fullOption‘ + jj).title.text = title[jj - 10];
                eval(‘fullOption‘ + jj).backgroundColor = ‘#F6F8FC‘;
                eval(‘totalFlowRate‘ + jj).setOption(eval(‘fullOption‘ + jj));
              }
            };
            $scope.sendserver();
            //此处向后台发送请求：结束
          }
        });
        eval(‘totalFlowRate‘ + jj).getZr().on(‘mouSEOut‘,‘‘);
          if (!eval(‘totalFlowRate‘ + index).containPixel(‘grid‘,pointInPixel)) {
            eval(‘fullOption‘ + index).backgroundColor = ‘#ffffff‘;
            eval(‘totalFlowRate‘ + index).setOption(eval(‘fullOption‘ + index));
            angular.element(‘#right‘).empty();
          }
        });
      } */
    }); 
</script>
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!