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

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, 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,
          splitLine: { show: true }/*网格线*/
        },
        series: {
          /*itemStyle: {normal: {areaStyle: {type: 'default'}}},*/
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#92c2ff'/*折线的颜色*/
              },
              color: '#66b3ff'/*图例(legend)的颜色,不是图例说明文字的颜色*/
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 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'];
      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）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 (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）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 (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', 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();
          }
        });
      } */
    }); 
</script>
原文地址：https://www.cnblogs.com/gushixianqiancheng/p/11655193.html