From 744b0efabb27fb2e8e68f7e9b94a32f693241fda Mon Sep 17 00:00:00 2001
From: jiaming <743192023@qq.com>
Date: Mon, 24 Dec 2018 18:24:52 +0800
Subject: [PATCH] optmization

---
 src/components/columnChart/index.vue | 15 ++++++++++++---
 src/components/forSlot/index.vue     | 21 +++++++++++++++++++++
 src/components/index.js              |  2 ++
 3 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 src/components/forSlot/index.vue

diff --git a/src/components/columnChart/index.vue b/src/components/columnChart/index.vue
index 08d1978..cf943b1 100644
--- a/src/components/columnChart/index.vue
+++ b/src/components/columnChart/index.vue
@@ -7,6 +7,8 @@
     </div>
 
     <label-line :label="data.labelLine" :colors="drawColors" />
+
+    <for-slot><slot></slot></for-slot>
   </div>
 </template>
 
@@ -20,6 +22,7 @@ import axisMixin from '../../mixins/axisMixin.js'
 export default {
   name: 'ColumnChart',
   mixins: [colorsMixin, canvasMixin, axisMixin],
+  props: ['data', 'colors'],
   data () {
     return {
       ref: `radar-chart-${(new Date()).getTime()}`,
@@ -47,7 +50,13 @@ export default {
       valuePointPos: []
     }
   },
-  props: ['data', 'colors'],
+  watch: {
+    data (d) {
+      const { draw } = this
+
+      d && draw()
+    }
+  },
   methods: {
     async init () {
       const { initCanvas, initColors } = this
@@ -327,7 +336,7 @@ export default {
     getOffsetPoints (points, offset) {
       const { getOffsetPoint } = this
 
-      return points.map(point => getOffsetPoint(point, offset))
+      return points.map(point => point ? getOffsetPoint(point, offset) : false)
     },
     getRoundColumnPoint ([pa, pb], cw = false) {
       const { horizon, columnItemWidth: dciw } = this
@@ -512,7 +521,7 @@ export default {
 
       const { ctx, defaultValueColor, defaultValueFontSize, valuePointPos, drawTexts } = this
 
-      const offset = horizon ? [10, 0] : [0, -5]
+      const offset = horizon ? [5, 0] : [0, -5]
 
       const trueOffset = valueTextOffset || offset
 
diff --git a/src/components/forSlot/index.vue b/src/components/forSlot/index.vue
new file mode 100644
index 0000000..8d14a66
--- /dev/null
+++ b/src/components/forSlot/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="for-slot">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ForSlot'
+}
+</script>
+
+<style lang="less">
+.for-slot {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+}
+</style>
diff --git a/src/components/index.js b/src/components/index.js
index 2b6c156..7fb9214 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -31,6 +31,7 @@ import waterLevelPond from './waterLevelPond/index.vue'
 import scrollBoard from './scrollBoard/index.vue'
 
 import labelLine from './labelLine'
+import forSlot from './forSlot'
 
 export default function (Vue) {
   Vue.component('borderBox1', borderBox1)
@@ -66,4 +67,5 @@ export default function (Vue) {
   Vue.component('scrollBoard', scrollBoard)
 
   Vue.component('labelLine', labelLine)
+  Vue.component('forSlot', forSlot)
 }