optmization

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
 

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>

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)
 }