[新增]预案状态name页面提示框

src/app/statistic-analysis/state/page-one/page-one.component.ts

@@ -48,13 +48,11 @@ export class PageOneComponent implements OnInit {
       tooltip: {
           trigger: 'item',
             formatter:  (params)=>{
-             //console.log(params)
               return this.biaogeTishi(params.name)
             } ,
           backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
           borderWidth:'1',
           borderRadius :'0'   
-          
       },
       legend: {
           orient: 'vertical',
@@ -101,9 +99,7 @@ export class PageOneComponent implements OnInit {
       ]
     };
     indexBzt.on('click', (params) => {
-      console.log(999)
       this.router.navigateByUrl('/statisticanalysis/statePageTwo_time');
-      // this.router.navigate(["/statisticanalysis/statePageTwo_time"])
     });
   indexBzt.setOption(options);
   }

src/app/statistic-analysis/state/page-two-name/page-two-name.component.ts

@@ -274,27 +274,12 @@ export class PageTwoNameComponent implements OnInit {
       },
       tooltip: {
         trigger: 'item',
-        formatter: function (params){
-             var res = '<div class="tishi" style="background:#FFFFFF"><span style="color:#000000;font-size:25px;padding:10px 10px">预案补充</span>'
-             res+='</br><table style="width:100% background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0" >';
-             res+='<thead><tr>';
-             res+='<td style="border:1px solid #000000">名称</td>';
-             res+='<td style="border:1px solid #000000">数量</td>'
-             res+='<td style="border:1px solid #000000">总占比</td>'
-             res+='</tr></thead>'
-             res+='<tbody>';
-            //  console.log(jsonObj)
-             for(var i=0;i<jsonObj.length;i++){
-               res+='<tr>'
-               res+='<td style="border:1px solid #000000">'+jsonObj[i].name+'</td>'
-               res+='<td style="border:1px solid #000000">'+jsonObj[i].number+'</td>'
-               res+='<td style="border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>'
-             }
-             res+='</tbody>'
-             res+='</table></div>'
-             return res
-        }
-
+          formatter:  (params)=>{
+            return this.tableTooltip(params.name)
+          } ,
+        backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
+        borderWidth:'1',
+        borderRadius :'0'   
       },
       legend: {
           orient: 'vertical',
@@ -335,4 +320,35 @@ export class PageTwoNameComponent implements OnInit {
     }
     passPlanEchart.setOption(option);
   }
+
+  tableTooltip(biaotou:string){
+    var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄埔支队","number":"144","zhanbi":"2.8%"},'
+    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
+    shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},'
+    shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},'
+    shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},'
+    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
+    shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},'
+    shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]'
+    var jsonObj =  JSON.parse(shuju);
+    var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+biaotou+'</span></div>'
+        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
+        res+='<thead><tr>';
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>'
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>'
+        res+='</tr></thead>'
+        res+='<tbody>';
+        for(var i=0;i<jsonObj.length;i++){
+          res+='<tr>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>'
+        }
+        
+        res+='</tbody>'
+        res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
+        res+='</table></div></div>'
+        return res
+  }
 }