From 32050c6b3dcdab557395ce6ec95007b8dcab7d81 Mon Sep 17 00:00:00 2001
From: liuqimichale <123456lq>
Date: Tue, 12 Mar 2019 14:36:16 +0800
Subject: [PATCH] 泊位信息

---
 src/components/VBerth.vue          |  52 ++++++++++++----------------------------------------
 src/components/base/BarEcharts.vue |  13 -------------
 src/components/base/PieEchart.vue  | 170 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 182 insertions(+), 53 deletions(-)
 delete mode 100644 src/components/base/BarEcharts.vue
 create mode 100644 src/components/base/PieEchart.vue

diff --git a/src/components/VBerth.vue b/src/components/VBerth.vue
index 2157699..dbfe31e 100644
--- a/src/components/VBerth.vue
+++ b/src/components/VBerth.vue
@@ -5,9 +5,12 @@
             <account-num>
                 <span>总计</span>
             </account-num>
-            <div class="income-echart" id="income-echart">
-                <bar-chart :chart-data="pieChartData"></bar-chart>
-            </div>
+            <ul class="income-echart">
+               <li>
+                   <pie-echart :chart-data="pieChartData"></pie-echart>
+               </li>
+               <li></li>
+            </ul>
         </div>
     </div>
 </template>
@@ -15,13 +18,13 @@
 <script>
 import CardTitle from './base/CardTitle'
 import AccountNum from './base/AccountNum'
-import barChart from './base/barChart'
+import PieEchart from './base/PieEchart'
 export default {
   name: 'VBerth',
   components: {
     CardTitle,
     AccountNum,
-    barChart
+    PieEchart
   },
   data() {
     return {
@@ -35,42 +38,7 @@ export default {
     //this.drawBar();
   },
   methods: {
-    drawBar() {
-      let myChart = echarts.init(document.getElementById('income-echart'));
-      let option = {
-        color: ['#f44'],
-        tooltip : {
-          trigger: 'axis',
-          axisPointer : {
-            type : 'shadow'
-          }
-        },
-        xAxis : [
-          {
-            type : 'category',
-            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
-            axisTick: {
-              alignWithLabel: true
-            }
-          }
-        ],
-        yAxis : [
-          {
-            type : 'value'
-          }
-        ],
-        series : [
-          {
-            name:'每月花费',
-            type:'bar',
-            barWidth: '60%',
-            data:[995,666,444,858,654,236,645,546,846,225,547,356]
-          }
-        ]
-      };
-      myChart.setOption(option);
 
-    }
   }
 }
 </script>
@@ -85,6 +53,10 @@ export default {
     }
     .income-echart{
         height: 70%;
+        display: flex;
+        >li{
+            flex: 1;
+        }
     }
 
 </style>
diff --git a/src/components/base/BarEcharts.vue b/src/components/base/BarEcharts.vue
deleted file mode 100644
index bf10c2f..0000000
--- a/src/components/base/BarEcharts.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-    <div></div>
-</template>
-
-<script>
-export default {
-  name: 'BarEcharts'
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/components/base/PieEchart.vue b/src/components/base/PieEchart.vue
new file mode 100644
index 0000000..bfccf62
--- /dev/null
+++ b/src/components/base/PieEchart.vue
@@ -0,0 +1,170 @@
+<template>
+    <div :class="className" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+require('echarts/theme/macarons') // echarts theme
+import {debounce} from '../../utils/debounce'
+
+export default {
+  name: 'PieEchart',
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.$nextTick(()=>{
+        this.initChart()
+      })
+    }
+  },
+  mounted() {
+    this.initChart()
+    if (this.autoResize) {
+      this.__resizeHandler = debounce(() => {
+        if (this.chart) {
+          this.chart.resize()
+        }
+      }, 100)
+      window.addEventListener('resize', this.__resizeHandler)
+    }
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    if (this.autoResize) {
+      window.removeEventListener('resize', this.__resizeHandler)
+    }
+
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    setOptions({yData} = {}) {
+      this.chart.setOption(
+        {
+          tooltip: {
+            show:false
+          },
+          series: [
+            {
+              type: 'pie',
+              radius: ['60%', '75%'],
+              center: ['50%', '50%'],
+              hoverAnimation:false,
+              label: {
+                show: false
+              },
+              lableLine: {
+                show: false
+              },
+              data: [
+                {
+                  value: yData[0],
+                  name: '空余',
+                  itemStyle: {
+                    normal: {
+                      color: {
+                        colorStops: [{
+                          offset: 0,
+                          color: '#00CAFE' // 0% 处的颜色
+                        }, {
+                          offset: 1,
+                          color: '#2772F4' // 100% 处的颜色
+                        }]
+                      },
+                    }
+                  }
+                },
+                {
+                  value: yData[1],
+                  name: '占有',
+
+                  itemStyle: {
+                    normal: {
+                      color: {
+                        colorStops: [{
+                          offset: 0,
+                          color: '#FFBA00' // 0% 处的颜色
+                        }, {
+                          offset: 1,
+                          color: '#FF8100' // 100% 处的颜色
+                        }]
+                      },
+                    }
+                  }
+                },
+
+              ],
+              animationType: 'scale',
+              animationEasing: 'elasticOut'
+            },
+            {
+              name: '', type: 'pie',
+              clockWise: true,hoverAnimation: false,
+              radius: ['90%', '90%'],
+              label: { normal: { position: 'center' }},
+              data: [{
+                value: 0,
+                label: {
+                  normal: {
+                    formatter:  '30.5%',//小数点后一位
+                    textStyle: {
+                      color: '#fe8b53',
+                      fontSize: 18,
+                      fontWeight: 'normal'
+                    }
+                  }
+                }
+              }, {
+                tooltip: {show: false},
+                label: {
+                  normal: {
+                    formatter: '\n占有',
+                    textStyle: {
+                      color: '#bbeaf9',fontSize: 12
+                    }
+                  }
+                }
+              }]
+            }
+
+          ]
+        }
+      )
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el)
+      this.setOptions(this.chartData)
+    },
+
+  }
+}
+</script>
--
libgit2 0.21.4