From 3bf5ec71e88e11b4066c71fde6b7d69799806eb9 Mon Sep 17 00:00:00 2001
From: jiaming <743192023@qq.com>
Date: Sat, 22 Dec 2018 20:55:24 +0800
Subject: [PATCH] add point chart

---
 src/components/pointChart/index.vue | 69 +++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 src/components/pointChart/index.vue

diff --git a/src/components/pointChart/index.vue b/src/components/pointChart/index.vue
new file mode 100644
index 0000000..ad15841
--- /dev/null
+++ b/src/components/pointChart/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="point-chart">
+    <loading v-if="!data" />
+
+    <div class="canvas-container">
+      <canvas :ref="ref" />
+    </div>
+  </div>
+</template>
+
+<script>
+import canvasMixin from '../../mixins/canvasMixin.js'
+
+import colorsMixin from '../../mixins/colorsMixin.js'
+
+import axisMixinEx from '../../mixins/axisMixinEx.js'
+
+export default {
+  name: 'PointChart',
+  mixins: [canvasMixin, colorsMixin, axisMixinEx],
+  props: ['data', 'colors'],
+  data () {
+    return {
+      ref: `point-chart-${(new Date()).getTime()}`,
+
+      // axis base config
+      boundaryGap: true,
+      horizon: false,
+      mulValueAdd: true
+    }
+  },
+  methods: {
+    async init () {
+      const { initCanvas, initColors, initAxis } = this
+
+      await initCanvas()
+
+      initColors()
+
+      initAxis()
+
+      const { drawAxis } = this
+
+      drawAxis()
+    }
+  },
+  mounted () {
+    const { init } = this
+
+    init()
+  }
+}
+</script>
+
+<style lang="less">
+.point-chart {
+  position: relative;
+  display: flex;
+
+  .canvas-container {
+    flex: 1;
+
+    canvas {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>