From 3b84e20944bd57d00873c891ba1220822105dc3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=9D=A8?= <1711467488@qq.com>
Date: Sat, 17 Feb 2018 11:36:17 +0800
Subject: [PATCH] no message

Former-commit-id: 3e4b61065639015e4f428830bd9ecbcc7c640323
Former-commit-id: d8f076f34c78424f72aebb149e454ba70d7ca008
Former-commit-id: d0abba9c3c41839184ff29bf4b63074bbfe098fa
---
 src/components/charts/G2/mixins/G2.js | 84 +++++++++++++++++++++++++++
 src/pages/demo/chart/index/index.vue  |  2 +-
 2 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 src/components/charts/G2/mixins/G2.js

diff --git a/src/components/charts/G2/mixins/G2.js b/src/components/charts/G2/mixins/G2.js
new file mode 100644
index 00000000..3147ca90
--- /dev/null
+++ b/src/components/charts/G2/mixins/G2.js
@@ -0,0 +1,84 @@
+// 所有 G2 图表组件都引用此 mixin
+
+import G2 from '@antv/g2'
+// import * as DataSet from '@antv/data-set'
+
+// 关闭 G2 的体验改进计划打点请求
+G2.track(false)
+
+export default {
+  props: {
+    // 图表数据
+    data: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    // [图表设置项] 高度
+    height: {
+      type: Number,
+      required: false,
+      default: 300
+    },
+    // [图表设置项] 开启自动填充父元素高度
+    autoHeight: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // [图表设置项] 自动宽度 建议为 true
+    forceFit: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  data () {
+    return {
+      // 在页面中不需要再引入 直接使用 this.G2
+      G2,
+      // 数据处理模块
+      // DataSet,
+      // 图表实例
+      chart: null,
+      // 在组件 mounted 后立即初始化图表
+      autoInit: true,
+      // [图表设置项] padding
+      padding: [40, 40, 40, 40]
+    }
+  },
+  mounted () {
+    // 如果设置了在 mounted 后自动初始化 就在这里初始化
+    if (this.autoInit) {
+      setTimeout(() => {
+        this.initHandler()
+      }, 0)
+    }
+  },
+  watch: {
+    // 数据改变
+    data () {
+      this.changeData()
+    }
+  },
+  methods: {
+    // 创建图表对象
+    creatChart () {
+      this.chart = new this.G2.Chart({
+        container: this.$refs.chart,
+        forceFit: this.forceFit,
+        // 高度
+        // 设置 autoHeight = true 后取 $refs.chart 的高度
+        // 设置 autoHeight = false 后取 this.height
+        height: this.autoHeight ? this.G2.DomUtil.getHeight(this.$refs.chart) : this.height,
+        padding: this.padding
+      })
+    },
+    // 重绘大小
+    resize (width, height) {
+      if (this.chart) {
+        this.chart.changeSize(width || this.G2.DomUtil.getWidth(this.$refs.chart), height || this.G2.DomUtil.getHeight(this.$refs.chart))
+      }
+    }
+  }
+}
diff --git a/src/pages/demo/chart/index/index.vue b/src/pages/demo/chart/index/index.vue
index 3d701ab0..42c4c25e 100644
--- a/src/pages/demo/chart/index/index.vue
+++ b/src/pages/demo/chart/index/index.vue
@@ -7,7 +7,7 @@
         @resized="resizedHandler('G2Line1')">
         <el-card class="header-in">
           <div slot="header">近年趋势</div>
-          1
+          
         </el-card>
       </GridItem>
     </GridLayout>