增加饼图

src/app/qs-mark/qs-mark.component.html

@@ -21,10 +21,9 @@
     </nz-tree>
   </div>
   <div class="content">
-    <div class="loading">
-      <div class="left"></div>
-      <div class="right"></div>
-      <div class="progress">质量监管</div>
-    </div>
+    <div echarts [options]="options1" (chartClick)="onChartEvent($event, 'chartClick')" theme="macarons"
+      class="demo-chart"></div>
+    <div echarts [options]="options2" (chartClick)="onChartEvent($event, 'chartClick')" theme="macarons"
+      class="demo-chart"></div>
   </div>
 </div>

src/app/qs-mark/qs-mark.component.less

@@ -38,70 +38,7 @@
 }
 
 .demo-chart {
-  height: 400px;
-}
-
-.loading {
-  margin: 100px auto;
-  width: 8em;
-  height: 8em;
-  position: relative;
-}
-
-.loading .progress {
-  position: absolute;
-  width: 6em;
-  height: 6em;
-  background-color: white;
-  border-radius: 50%;
-  left: 1em;
-  top: 1em;
-  line-height: 6em;
-  text-align: center;
-}
-
-.left,
-.right {
-  width: 4em;
-  height: 8em;
-  overflow: hidden;
-  position: relative;
+  height: 500px;
+  width: 500px;
   float: left;
-  background-color: #999999
-}
-
-.left {
-  border-radius: 8em 0 0 8em;
-}
-
-.right {
-  border-radius: 0 8em 8em 0;
-}
-
-.left:after,
-.right:after {
-  content: "";
-  position: absolute;
-  display: block;
-  width: 4em;
-  height: 8em;
-  background-color: white;
-  border-radius: 8em 0 0 8em;
-  background-color: red;
-}
-
-.right:after {
-  content: "";
-  position: absolute;
-  display: block;
-  border-radius: 0 8em 8em 0;
-}
-
-.left:after {
-  transform-origin: right center;
-}
-
-.right:after {
-  transform-origin: left center;
-  transform: rotateZ(45deg);
 }

src/app/qs-mark/qs-mark.component.ts

@@ -12,7 +12,222 @@ export class QsMarkComponent implements OnInit {
   nodes = [{ title: "高速公路", key: "1" }, { title: "普通干线", key: "0" }];
 
   constructor(private http: HttpClient, private d: DefaultService) {}
+  options1 = {
+    legend: {
+      orient: "vertical",
+      x: "left",
+      data: []
+    },
+    color: [
+      "#015293",
+      "#015293",
+      "#015293",
+      "#015293",
+      "#015293",
+      "#015293",
+      "#015293",
+      "#015293"
+    ],
 
+    calculable: false,
+    series: [
+      {
+        name: "",
+        type: "pie",
+        selectedMode: "single",
+        selectedOffset: 0,
+        radius: [0, 90],
+        // for funnel
+        x: "20%",
+        width: "40%",
+        y: "90%",
+        funnelAlign: "right",
+        max: 1548,
+
+        itemStyle: {
+          normal: {
+            label: {
+              position: "inner",
+              fontWeight: "bold",
+              fontSize: 16
+            },
+            labelLine: {
+              show: false
+            }
+          }
+        },
+        data: [
+          {
+            value: 335,
+            name: "安全监管\n\n\n\n\n",
+            link: "http://tydeh.zhinengjianshe.com?username=dehzhb&password=a",
+            label: {
+              fontWeight: "bold",
+              fontSize: 20,
+              verticalAlign: "middle"
+            }
+          }
+        ]
+      },
+      {
+        name: "",
+        type: "pie",
+        radius: [100, 200],
+        // for funnel
+        x: "80%",
+        width: "70%",
+        funnelAlign: "left",
+        max: 1048,
+        itemStyle: {
+          normal: {
+            label: {
+              position: "inner"
+            },
+            labelLine: {
+              show: true
+            },
+            borderWidth: 5, //设置border的宽度有多大
+            borderColor: "#fff"
+          }
+        },
+        data: [
+          {
+            value: 500,
+            name: "人员信息"
+          },
+          {
+            value: 500,
+            name: "风险信息"
+          },
+          {
+            value: 500,
+            name: "机械设备信息"
+          },
+          {
+            value: 500,
+            name: "安全投入信息"
+          },
+          {
+            value: 500,
+            name: "隐患信息"
+          },
+          {
+            value: 500,
+            name: "应急预案信息"
+          },
+          {
+            value: 500,
+            name: "应急资源信息"
+          }
+        ]
+      }
+    ]
+  };
+  options2 = {
+    legend: {
+      orient: "vertical",
+      x: "left",
+      data: []
+    },
+    color: [
+      "#015293",
+      "#015293",
+      "#015293",
+      "#015293",
+      "#015293",
+      "#015293",
+      "#015293",
+      "#015293"
+    ],
+
+    calculable: false,
+    series: [
+      {
+        name: "",
+        type: "pie",
+        selectedMode: "single",
+        selectedOffset: 0,
+        radius: [0, 90],
+        // for funnel
+        x: "20%",
+        width: "40%",
+        y: "90%",
+        funnelAlign: "right",
+        max: 1548,
+
+        itemStyle: {
+          normal: {
+            label: {
+              position: "inner",
+              fontWeight: "bold",
+              fontSize: 16
+            },
+            labelLine: {
+              show: false
+            }
+          }
+        },
+        data: [
+          {
+            value: 335,
+            name: "质量监管\n\n\n\n\n",
+            label: {
+              fontWeight: "bold",
+              fontSize: 20,
+              verticalAlign: "middle"
+            }
+          }
+        ]
+      },
+      {
+        name: "",
+        type: "pie",
+        radius: [100, 200],
+        startAngle: 50,
+        // for funnel
+        x: "80%",
+        width: "70%",
+        funnelAlign: "left",
+        max: 1048,
+        itemStyle: {
+          normal: {
+            label: {
+              position: "inner"
+            },
+            labelLine: {
+              show: false
+            },
+            borderWidth: 5, //设置border的宽度有多大
+            borderColor: "#fff"
+          }
+        },
+        data: [
+          {
+            value: 500,
+            name: "责任体系"
+          },
+          {
+            value: 500,
+            name: "试验检测"
+          },
+          {
+            value: 500,
+            name: "工序检验",
+            link: "http://47.92.203.246/pcByFullScreen/#/pcByFullScreen/"
+          },
+          {
+            value: 500,
+            name: "质量督导检查"
+          },
+          {
+            value: 500,
+            name: "工程评价"
+          },
+          {}
+        ]
+      }
+    ]
+  };
   ngOnInit() {}
 
   nzEvent(event: Required<NzFormatEmitEvent>) {
@@ -45,4 +260,8 @@ export class QsMarkComponent implements OnInit {
       }
     }
   }
+  onChartEvent(event: any, type: string) {
+    console.log("chart event:", type, event);
+    window.open(event.data.link);
+  }
 }