add column chart

src/components/columnChart/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="column-chart">
+    <loading v-if="!data" />
+
+    <div class="canvas-container">
+      <canvas :ref="ref" />
+    </div>
+
+    <label-line :label="data.labelLine" :colors="drawColors" />
+  </div>
+</template>
+
+<script>
+import colorsMixin from '../../mixins/colorsMixin.js'
+
+import canvasMixin from '../../mixins/canvasMixin.js'
+
+import axisMixin from '../../mixins/axisMixin.js'
+
+export default {
+  name: 'ColumnChart',
+  mixins: [colorsMixin, canvasMixin, axisMixin],
+  data () {
+    return {
+      ref: `radar-chart-${(new Date()).getTime()}`,
+
+      axisType: 'column'
+    }
+  },
+  props: ['data', 'colors'],
+  methods: {
+    async init () {
+      const { initCanvas, data, draw } = this
+
+      await initCanvas()
+
+      data && draw()
+    },
+    draw () {
+      const { clearCanvas, initColors, initAxis, drawAxis } = this
+
+      clearCanvas()
+
+      initColors()
+
+      initAxis()
+
+      drawAxis()
+    }
+  },
+  mounted () {
+    const { init } = this
+
+    init()
+  }
+}
+</script>
+
+<style lang="less">
+.column-chart {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  .canvas-container {
+    flex: 1;
+  }
+
+  canvas {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/components/index.js

@@ -20,12 +20,15 @@ import polylineChart from './polylineChart/index.vue'
 import concentricArcChart from './concentricArcChart/index.vue'
 import arcRingChart from './arcRingChart/index.vue'
 import radarChart from './radarChart/index.vue'
+import columnChart from './columnChart/index.vue'
 
 import numberShow from './numberShow/index.vue'
 import percentPond from './percentPond/index.vue'
 import waterLevelPond from './waterLevelPond/index.vue'
 import scrollBoard from './scrollBoard/index.vue'
 
+import labelLine from './labelLine'
+
 export default function (Vue) {
   Vue.component('borderBox1', borderBox1)
   Vue.component('borderBox2', borderBox2)
@@ -49,9 +52,12 @@ export default function (Vue) {
   Vue.component('concentricArcChart', concentricArcChart)
   Vue.component('arcRingChart', arcRingChart)
   Vue.component('radarChart', radarChart)
+  Vue.component('columnChart', columnChart)
 
   Vue.component('numberShow', numberShow)
   Vue.component('percentPond', percentPond)
   Vue.component('waterLevelPond', waterLevelPond)
   Vue.component('scrollBoard', scrollBoard)
+
+  Vue.component('labelLine', labelLine)
 }