[完善]修改首页饼图

src/app/pages/home-page/home-page.component.html

@@ -38,12 +38,17 @@
             </div>
             <div class="leftboxcontent">
                 <div class="leftitem leftitemlimit">
-                    <div class="warningnum">
+                    <!-- <div class="warningnum">
                         <h1>{{HomeAggregatioData.recordCount}}</h1>
                         <span>累计预警</span>
                     </div>
                     <img class="bucket" src="../../../assets/images/bucket.png" alt="">
-                    <img class="circle" src="../../../assets/images/circle.png" alt="">
+                    <img class="circle" src="../../../assets/images/circle.png" alt=""> -->
+                    <div class="eventechartpieAll" id="eventechartpieAll">
+
+
+                    </div>
+                    <nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin>
                 </div>
                 <!-- <div class="leftitem" *ngIf="!userdata.organization.parentId">
                     <span class="itemname">公司排名</span>

src/app/pages/home-page/home-page.component.scss

@@ -156,7 +156,10 @@
         padding: 12px 16px;
         display: flex;
         flex-direction: column;
-
+        .eventechartpieAll{
+          width: 100%;
+          height: 100%;
+        }
         .progress {
           height: 4px;
           width: 100%;

src/app/pages/home-page/home-page.component.ts

@@ -17,8 +17,84 @@ declare var tools
 export class HomePageComponent implements OnInit {
 
   constructor(private http: HttpClient, private router: Router, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService) { }
+  warningechartpieAll//全部预警饼图
+  warningechartpieOptionAll = {
+    color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'],
+    tooltip: {
+      trigger: 'item'//触发类型
+    },
+    legend: {
+      top: '1%',
+      // left: '25.5%',
+      itemGap: 6,
+      itemWidth: 6,
+      itemHeight: 6,
+      formatter: (name) => {
+        return '{a|' + name + '}';
+      },
+      textStyle: {
+        color: '#fff',
+        rich: {
+          a: {
+            width: 50
+          }
+        }
+      }
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['55%', '65%'],
+        top: '10%',
+        // bottom: '-5%',
+        // right: '77%',
+        avoidLabelOverlap: false,//防止标签重叠策略
+        emphasis: {//中间高亮区域
+          show: true,
+        },
+        data: [
+        ],
+        tooltip: {//鼠标移入提示
+          position: 'right',
+          padding: [14, 19],
+          backgroundColor: 'rgba(28, 129, 218, 0.4)',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          },
+          formatter: "{b} : {c} ({d}%)",
+          extraCssText: 'z-index:2'
+        },
+        label: {
+          normal: {
+            show: true,
+            position: 'center',
+            color: '#4c4a4a',
+            formatter: '',
+            rich: {
+              total: {
+                fontSize: document.documentElement.clientHeight < 750 ? 20 : 35,
+                textShadowColor: '#8df',
+                textShadowBlur: 3,
+                color: '#fff',
 
-  warningechartpie//预警饼图
+              },
+              active: {
+                fontSize: document.documentElement.clientHeight < 750 ? 12 : 14,
+                color: '#fff',
+                fontFamily: 'Microsoft YaHei',
+              },
+            }
+          },
+          emphasis: {//中间文字显示
+            show: true,
+          }
+        }
+      }
+    ]
+  };
+
+  warningechartpie//30天预警饼图
   warningechartpieOption = {
     color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'],
     tooltip: {
@@ -195,7 +271,7 @@ export class HomePageComponent implements OnInit {
       top: '30px'
     }
   };
-  //一级饼图
+  oilchartpie//卸油饼图
   oilchartpieOption = {
     color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'],
     tooltip: {
@@ -267,7 +343,8 @@ export class HomePageComponent implements OnInit {
     ]
   };
   oilchartpieOptionPieData1: any
-  //一级柱状图
+
+  oilchartbar//卸油折线图
   oilchartbarOption = {
     xAxis: {
       type: 'category',
@@ -381,23 +458,24 @@ export class HomePageComponent implements OnInit {
     }
   };
 
-  oilchartpie//卸油饼图
+
-  oilchartbar//卸油折线图
+
   userdata
   ngOnInit(): void {
 
     this.userdata = JSON.parse(sessionStorage.getItem('userdata'))
 
     // 饼图
+    this.warningechartpieAll = echarts.init(document.getElementById('eventechartpieAll'),null,{devicePixelRatio:2});
     // this.equipmentechart = echarts.init(document.getElementById('equipmentechart'));
     // 预警饼图
-    this.warningechartpie = echarts.init(document.getElementById('eventechartpie'));
+    this.warningechartpie = echarts.init(document.getElementById('eventechartpie'),null,{devicePixelRatio:2});
     // 预警线图
     this.warningechartbar = echarts.init(document.getElementById('eventechartline'));
 
 
     // 卸油饼图
-    this.oilchartpie = echarts.init(document.getElementById('oilechartpie'));
+    this.oilchartpie = echarts.init(document.getElementById('oilechartpie'),null,{devicePixelRatio:2});
     // 卸油线图
     this.oilchartbar = echarts.init(document.getElementById('oilechartline'));
 
@@ -405,6 +483,7 @@ export class HomePageComponent implements OnInit {
 
     window.onresize = () => {
       setTimeout(() => {
+        this.warningechartpieAll.resize();
         this.warningechartpie.resize();
         this.warningechartbar.resize();
         this.oilchartpie.resize();
@@ -496,17 +575,28 @@ export class HomePageComponent implements OnInit {
   //预警图表
   equipmentechartdata
   tools1
+  tools1All
   tools2
   eventEcharts(data) {
+    let violationTypeAggCount = 0
+    let violationTypeAggCountAll = 0
     data.violationType.violationTypeAgg.forEach(element => {
-      // num += element.count
+      violationTypeAggCount += element.count
+      element.name = element.key
+      element.value = element.count
+    });
+    data.violationType.violationTypeAggAll.forEach(element => {
+      violationTypeAggCountAll += element.count
       element.name = element.key
       element.value = element.count
     });
     this.warningechartpieOption.series[0].data = data.violationType.violationTypeAgg;
-    this.warningechartpieOption.series[0].label.normal.formatter = '{total|' + data.recordCount + '}' + '\n\r' + '{active|预警事件}'
+    this.warningechartpieOption.series[0].label.normal.formatter = '{total|' + violationTypeAggCount + '}' + '\n\r' + '{active|预警事件}'
     this.warningechartpie.setOption(this.warningechartpieOption);
 
+    this.warningechartpieOptionAll.series[0].data = data.violationType.violationTypeAggAll;
+    this.warningechartpieOptionAll.series[0].label.normal.formatter = '{total|' + violationTypeAggCountAll + '}' + '\n\r' + '{active|累计预警}'
+    this.warningechartpieAll.setOption(this.warningechartpieOptionAll);
     // 可调用clearLoop方法，清除定时器
     this.tools1 && this.tools1.clearLoop();
     this.tools1 = null;
@@ -515,6 +605,14 @@ export class HomePageComponent implements OnInit {
       loopSeries: true
     });
 
+    this.tools1All && this.tools1All.clearLoop();
+    this.tools1All = null;
+    this.tools1All = tools.loopShowTooltip(this.warningechartpieAll, this.warningechartpieOptionAll, {
+      interval: 5000,
+      loopSeries: true
+    });
+
+
     let monthArr = []
     let valuedata = []
     data.violationType.days30ViolationCount.forEach(element => {
@@ -528,7 +626,6 @@ export class HomePageComponent implements OnInit {
       return value > 1000;
     })
     if (xxx) {
-      // console.log('xxxxxxxxxx')
       this.warningechartbarOption.series[1].label.normal.formatter = function (dataObj) {
         const { dataIndex, value } = dataObj;
         let labelText = value;