From be79dd15ee1a1c65055231698f0897efdef95da8 Mon Sep 17 00:00:00 2001
From: liuqimichale <123456lq>
Date: Wed, 12 Dec 2018 16:26:30 +0800
Subject: [PATCH] 道闸

---
 src/components/allPieChart.vue  | 215 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------
 src/components/halfPieChart.vue |   5 ++---
 src/views/youdaopingsection.vue |  11 ++---------
 3 files changed, 213 insertions(+), 18 deletions(-)

diff --git a/src/components/allPieChart.vue b/src/components/allPieChart.vue
index 6c6892c..e3797e4 100644
--- a/src/components/allPieChart.vue
+++ b/src/components/allPieChart.vue
@@ -26,7 +26,7 @@ export default {
       default: true
     },
     chartData: {
-      type: Object,
+      type: Array,
       required: true
     }
   },
@@ -62,14 +62,217 @@ export default {
     this.chart = null
   },
   methods: {
-    setOptions({xData, yData} = {}) {
+    setOptions(data) {
       this.chart.setOption({
-        backgroundColor:'#ffffff',
         tooltip: {
           trigger: 'item',
           formatter: "{b} : {c} ({d}%)"
         },
         series: [
+          {
+            type: 'pie',
+            radius: ['30%', '31%'],
+            center: ['50%', '50%'],
+            hoverAnimation:false,
+            tooltip: {
+              show:false
+            },
+            label: {
+              show: false
+            },
+            lableLine: {
+              show: false
+            },
+            data: [
+              {
+                value: 0,
+              },
+              {
+                value: 55,
+                itemStyle: {
+                  normal: {
+                    color: 'rgba(89,170,247,.3)'
+                  }
+                }
+              },
+
+            ]
+          },
+          {
+            type: 'pie',
+            radius: ['40%', '41%'],
+            center: ['50%', '50%'],
+            hoverAnimation:false,
+            tooltip: {
+              show:false
+            },
+            label: {
+              show: false
+            },
+            lableLine: {
+              show: false
+            },
+            data: [
+              {
+                value: 0,
+              },
+              {
+                value: 55,
+                itemStyle: {
+                  normal: {
+                    color: 'rgba(89,170,247,.3)'
+                  }
+                }
+              },
+
+            ]
+          },
+          {
+            type: 'pie',
+            radius: ['50%', '51%'],
+            center: ['50%', '50%'],
+            hoverAnimation:false,
+            tooltip: {
+              show:false
+            },
+            label: {
+              show: false
+            },
+            lableLine: {
+              show: false
+            },
+            data: [
+              {
+                value: 0,
+              },
+              {
+                value: 55,
+                itemStyle: {
+                  normal: {
+                    color: 'rgba(89,170,247,.3)'
+                  }
+                }
+              },
+
+            ]
+          },
+          {
+            type: 'pie',
+            radius: ['60%', '61%'],
+            center: ['50%', '50%'],
+            hoverAnimation:false,
+            tooltip: {
+              show:false
+            },
+            label: {
+              show: false
+            },
+            lableLine: {
+              show: false
+            },
+            data: [
+              {
+                value: 0,
+              },
+              {
+                value: 55,
+                itemStyle: {
+                  normal: {
+                    color: 'rgba(89,170,247,.3)'
+                  }
+                }
+              },
+
+            ]
+          },
+          {
+            type: 'pie',
+            radius: ['70%', '71%'],
+            center: ['50%', '50%'],
+            hoverAnimation:false,
+            tooltip: {
+              show:false
+            },
+            label: {
+              show: false
+            },
+            lableLine: {
+              show: false
+            },
+            data: [
+              {
+                value: 0,
+              },
+              {
+                value: 55,
+                itemStyle: {
+                  normal: {
+                    color: 'rgba(89,170,247,.3)'
+                  }
+                }
+              },
+
+            ]
+          },
+          {
+            type: 'pie',
+            radius: ['80%', '81%'],
+            center: ['50%', '50%'],
+            hoverAnimation:false,
+            tooltip: {
+              show:false
+            },
+            label: {
+              show: false
+            },
+            lableLine: {
+              show: false
+            },
+            data: [
+              {
+                value: 0,
+              },
+              {
+                value: 55,
+                itemStyle: {
+                  normal: {
+                    color: 'rgba(89,170,247,.3)'
+                  }
+                }
+              },
+
+            ]
+          },
+          {
+            type: 'pie',
+            radius: ['90%', '91%'],
+            center: ['50%', '50%'],
+            hoverAnimation:false,
+            tooltip: {
+              show:false
+            },
+            label: {
+              show: false
+            },
+            lableLine: {
+              show: false
+            },
+            data: [
+              {
+                value: 0,
+              },
+              {
+                value: 55,
+                itemStyle: {
+                  normal: {
+                    color: 'rgba(89,170,247,.3)'
+                  }
+                }
+              },
+
+            ]
+          },
+
 
           {
           name: '内环',
@@ -106,7 +309,7 @@ export default {
           {
             name: '半径模式',
             type: 'pie',
-            radius: ['20%', '90%'],
+            radius: ['20%', '80%'],
             center: ['50%', '50%'],
             hoverAnimation:false,
             roseType: 'radius',
@@ -118,7 +321,7 @@ export default {
             },
             data: [
               {
-                value: 35,
+                value: data[0],
                 name: '诱导屏',
                 itemStyle: {
                   normal: {
@@ -135,7 +338,7 @@ export default {
                 }
               },
               {
-                value: 55,
+                value: data[1],
                 name: '道闸',
                 itemStyle: {
                   normal: {
diff --git a/src/components/halfPieChart.vue b/src/components/halfPieChart.vue
index 7508d10..9297aa9 100644
--- a/src/components/halfPieChart.vue
+++ b/src/components/halfPieChart.vue
@@ -74,7 +74,6 @@ export default {
         series: [
 
           {
-            name: '半径模式',
             type: 'pie',
             radius: ['60%', '75%'],
             center: ['50%', '50%'],
@@ -88,7 +87,7 @@ export default {
             data: [
               {
                 value: 35,
-                name: '诱导屏',
+                name: '空闲',
                 itemStyle: {
                   normal: {
                     color: {
@@ -105,7 +104,7 @@ export default {
               },
               {
                 value: 55,
-                name: '道闸',
+                name: '占有',
                 itemStyle: {
                   normal: {
                     color: {
diff --git a/src/views/youdaopingsection.vue b/src/views/youdaopingsection.vue
index c5d22cd..a41aa60 100644
--- a/src/views/youdaopingsection.vue
+++ b/src/views/youdaopingsection.vue
@@ -17,7 +17,7 @@
         </div>
       </li>
       <li>
-        <allPieChart :chart-data="lineChartData"/>
+        <allPieChart :chart-data="pieChartData"/>
       </li>
     </ul>
   </div>
@@ -28,13 +28,6 @@ import titlesection from '../components/titlesection'
 import allPieChart from '../components/allPieChart'
 import {fetchList} from '../api/api'
 
-const lineChartData = {
-  newVisitis: {
-    yData: [100, 120, 161],
-    xData: ['正常', '异常', '故障']
-  }
-}
-
 
 export default {
   name: 'youdaopingsection',
@@ -44,7 +37,7 @@ export default {
   },
   data() {
     return {
-      lineChartData: lineChartData.newVisitis,
+      pieChartData:  [35, 55],
       dzNum: '23454',
       ydpNum: '4454'
     }
--
libgit2 0.21.4