[统计分析]鼠标弹窗位置调整

4 years ago · 9ad9dc5540
6 changed files with 152 additions and 10 deletions
--- a/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts
+++ b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts
@ -137,7 +137,7 @@ export class AddUnitThreeBarDetailsComponent implements OnInit {
        formatter:  (params)=>{
          return this.tableTooltip(params)
        },
-        position:this.serviceData.tableTooltipNoShow2
+        position:this.serviceData.tableTooltipNoShowq
      },
      series: [{
          data: this.zhiNumData,
--- a/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts
+++ b/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts
@ -181,7 +181,7 @@ export class AddUnitTwoTimeComponent implements OnInit {
        formatter:  (params)=>{
          return this.serviceData.tableTooltip(this.serviceData.buildingType,params[0].name)
        },
-        position:this.serviceData.tableTooltipNoShow
+        position:this.serviceData.tableTooltipNoShowt
      },
      // x轴
      xAxis: {
--- a/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts
+++ b/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts
@ -246,7 +246,7 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
          formatter:  (params)=>{
            return this.tableTooltip(this.tableDataZhong,params.name)
          },
-          position: this.data.tableTooltipNoShow2
+          //position: this.data.tableTooltipNoShow
        },
        series: [{
            data: this.zhiNumData,
--- a/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts
+++ b/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts
@ -4,7 +4,7 @@
 * @Author: sueRimn
 * @Date: 2020-09-02 16:22:35
 * @LastEditors: sueRimn
- * @LastEditTime: 2020-09-11 17:13:40
+ * @LastEditTime: 2020-09-15 17:23:11
 */
 import { Component, OnInit } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
@ -141,7 +141,7 @@ export class DeleteThereComponent implements OnInit {
    this.zhutu = ec.init(document.getElementById('zhidui'),'walden');
    this.option = {
      title: {
-        text: `${headName}`+'：总数(666)',
+        text: headName+'：总数(666)',
        left: "center",
        top: "0",
        textStyle: {
@ -180,7 +180,7 @@ export class DeleteThereComponent implements OnInit {
        formatter:  (params)=>{
          return this.echartsData.biaogeTishi(params.name)
        },
-        position: this.echartsData.tableTooltipNoShow2
+        position: this.echartsData.tableTooltipNoShowq
        /* backgroundColor:'rgba(255,255,255,1)',
        borderWidth:'1',
        borderRadius :'0' */
--- a/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts
+++ b/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts
@ -4,7 +4,7 @@
 * @Author: sueRimn
 * @Date: 2020-09-02 16:21:18
 * @LastEditors: sueRimn
- * @LastEditTime: 2020-09-11 16:42:00
+ * @LastEditTime: 2020-09-16 14:28:19
 */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
@ -32,6 +32,7 @@ export class DeleteTwoComponent implements OnInit {
  @ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用 */

  ngOnInit(): void {
+    this.echartsData.statefulInspectionToggle=true
    this.dateInit()
    this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex)
    //this.bianli()
@ -180,6 +181,7 @@ export class DeleteTwoComponent implements OnInit {
    }
  }
  
+
  /**
   * @name: 折线图
   * @test: test font
@ -189,6 +191,15 @@ export class DeleteTwoComponent implements OnInit {
   */  
  headZhexian(divid:string,headtext:string,datayuex,datayuey){
    var dianji:boolean=headtext=="删除数量总统计" ? false:true;
+    var divsiaze={contentSize: [350, 496], viewSize: [831, 380]}
+    var pagex
+    var pagey
+    var boxsize=[pagex,pagey]
+    document.onmouseover=function(e){
+      console.log("000")
+      pagex=e.pageX
+      pagey=e.pageY
+    }
    var ec = echarts as any;
    this.headZx = ec.init(document.getElementById(`${divid}`),'skinUpp');
    this.options = {
@ -223,7 +234,7 @@ export class DeleteTwoComponent implements OnInit {
        /* backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
        borderWidth:'1',
        borderRadius :'0', */
-        position:divid=='Line'? this.echartsData.tableTooltipNoShow2:false
+        position:divid=='Line'? this.echartsData.tableTooltipNoShowt:false
      },
      xAxis: {
          type: 'category',
--- a/src/app/statistic-analysis/echarts-data.service.ts
+++ b/src/app/statistic-analysis/echarts-data.service.ts
@ -185,13 +185,13 @@ export class EchartsDataService {
   
    // boxWidth > pointX 说明鼠标左边放不下提示框
    if (boxWidth > pointX) {
-      x = 35;
+      x = pointX + 60;
    } else { // 左边放的下
      x = pointX + 80;
    }
     //  说明鼠标右边放不下提示框
    if(viewWidth - 100 - pointX < boxWidth){
-      x = pointX - boxWidth;
+      x = pointX - boxWidth-50;
    }


@ -205,6 +205,136 @@ export class EchartsDataService {
    return [x, y];
  }

+  //第三层鼠标弹窗效果
+  tableTooltipNoShowq(point, params, dom, rect, size) {
+    // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
+    // 提示框位置
+    var x = 0; // x坐标位置
+    var y = 0; // y坐标位置
+   
+    // 当前鼠标位置
+    var pointX = point[0];
+    var pointY = point[1];
+   
+    // 外层div大小
+    var viewWidth = size.viewSize[0];
+    var viewHeight = size.viewSize[1];
+   
+    // 提示框大小
+    var boxWidth = size.contentSize[0];
+    var boxHeight = size.contentSize[1];
+   
+    // boxWidth > pointX 说明鼠标左边放不下提示框
+    if (boxWidth > pointX) {
+      x = pointX + 40;
+      //上面放不下
+      if (boxHeight > pointY){
+        y=pointY+30
+      }
+      //下面放不下
+      if(viewHeight+162-pointY<boxHeight){
+        y=pointY-boxHeight+90
+      } 
+    } else if(viewWidth - 100 - pointX < boxWidth){ // 左边放的下右边放不下
+        x = pointX - boxWidth-50;
+        //上面放不下
+      if (boxHeight > pointY){
+        y=pointY+30
+      }
+      //下面放不下
+      if(viewHeight+162-pointY<boxHeight){
+        y=pointY-boxHeight+90
+      } 
+      //x = pointX + 80;
+    }else{//左右都能放下
+      //上面放不下
+      if (boxHeight > pointY){
+        y=pointY+30
+      }
+      //下面放不下
+      if(viewHeight+162-pointY<boxHeight){
+        y=pointY-boxHeight+90
+      }
+      else{
+        y=pointY+30
+      }
+      x = pointX + 40; 
+    }
+     //  说明鼠标右边放不下提示框
+    /* if(viewWidth - 100 - pointX < boxWidth){
+      x = pointX - boxWidth-50;
+    } */
+
+
+    // boxHeight > pointY 说明鼠标上边放不下提示框
+    /* if (boxHeight > pointY) {
+      y = 65;
+    } else { // 上边放得下
+      y = pointY - boxHeight;
+    } */
+
+    return [x, y];
+  }
+
+  //第二层鼠标弹窗效果
+  tableTooltipNoShowt(point, params, dom, rect, size) {
+    // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
+    // 提示框位置
+    var x = 0; // x坐标位置
+    var y = 0; // y坐标位置
+   
+    // 当前鼠标位置
+    var pointX = point[0];
+    var pointY = point[1];
+   
+    // 外层div大小
+    var viewWidth = size.viewSize[0];
+    var viewHeight = size.viewSize[1];
+   
+    // 提示框大小
+    var boxWidth = size.contentSize[0];
+    var boxHeight = size.contentSize[1];
+   
+    // boxWidth > pointX 说明鼠标左边放不下提示框
+    if (boxWidth > pointX) {
+      x = pointX + 40;
+      //上面放不下
+      if (boxHeight > pointY){
+        y=pointY+30
+      }
+      //下面放不下
+      if(viewHeight+400-pointY<boxHeight){
+        y=pointY-boxHeight+105
+      } 
+    } else if(viewWidth - 100 - pointX < boxWidth){ // 左边放的下右边放不下
+        x = pointX - boxWidth-50;
+        //上面放不下
+      if (boxHeight > pointY){
+        y=pointY+30
+      }
+      //下面放不下
+      if(viewHeight+400-pointY<boxHeight){
+        y=pointY-boxHeight+90
+      } 
+      //x = pointX + 80;
+    }else{//左右都能放下
+      //上面放不下
+      if (boxHeight > pointY){
+        y=pointY+30
+      }
+      //下面放不下
+      if(viewHeight+400-pointY<boxHeight){
+        y=pointY-boxHeight+90
+      }
+      else{
+        y=pointY+30
+      }
+      x = pointX + 40; 
+    }
+     
+    return [x, y];
+  }
+
  //用法：
  // tooltip: {
  //   trigger: 'axis',
@ -288,6 +418,7 @@ export class EchartsDataService {
    var arrshuzu='[';
    for(var i=0;i<yData.length;i++){
      arrshuzu+='{"value":'+yData[i]+',"coord":['+i+','+yData[i]+'],"name":'+'"'+xData[i]+'"'+'},'
+      //arrshuzu+=`{"value":${yData[i]},"coord":[${i},${yData[i]}],"name":`+`"`+`${xData[i]}`+`"`+`},`
    }
    arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
    arrshuzu+=']'