no message

Former-commit-id: f6a5fca09b86f3a96cb9fa66ff4b52fc3500fc72
Former-commit-id: eca145feeaa4bbef48a4a6e6a1bc7fbe999a1c8b
Former-commit-id: 231af91d28697142824bde9c2fc2e49c5f84eed2

src/components/G2/G2.js

@@ -1,11 +1,25 @@
 import G2 from '@antv/g2'
+// 关闭 G2 的体验改进计划打点请求
+G2.track(false)
+
 export default {
+  props: {
+    data: {
+      type: Array,
+      required: false,
+      default: () => []
+    }
+  },
   data () {
     return {
       // 库 在页面中不需要再引入 直接使用 this.G2
       G2,
       // 图表实例
       chart: null,
+      // 在组件 mounted 后立即初始化图表
+      mountedInit: true,
+      // [图表设置项] 标题
+      title: '标题',
       // [图表设置项] 高度
       height: 300,
       // [图表设置项] 开启自动填充父元素高度
@@ -23,9 +37,18 @@ export default {
     ])
   },
   mounted () {
-    setTimeout(() => {
-      this.initHandler()
-    }, 0)
+    // 如果设置了在 mounted 后自动初始化 就在这里初始化
+    if (this.mountedInit) {
+      setTimeout(() => {
+        this.initHandler()
+      }, 0)
+    }
+  },
+  watch: {
+    // 数据改变
+    data () {
+      this.changeData()
+    }
   },
   methods: {
     // 创建图表
@@ -38,26 +61,35 @@ export default {
       })
     },
     // 设置图表的标题
-    setChartTitle (title) {
-      if (title) {
-        this.chart.guide().text({
-          top: true,
-          position: ['min', 'max'],
-          content: title,
-          style: {
-            fill: '#666', // 文本颜色
-            fontSize: '16', // 文本大小
-            fontWeight: 'bold' // 文本粗细
-          },
-          offsetX: 0,
-          offsetY: 0
-        })
-      }
+    setChartTitle () {
+      this.chart.guide().text({
+        top: true,
+        position: ['min', 'max'],
+        content: this.title,
+        style: {
+          fill: '#666', // 文本颜色
+          fontSize: '16', // 文本大小
+          fontWeight: 'bold' // 文本粗细
+        },
+        offsetX: 0,
+        offsetY: 0
+      })
     },
+    // 重绘大小
     resize () {
       if (this.chart) {
         this.chart.changeSize(this.G2.DomUtil.getWidth(this.$refs.chart), this.G2.DomUtil.getHeight(this.$refs.chart))
       }
+    },
+    // 数据源改变 重新渲染新的数据
+    changeData () {
+      if (this.chart) {
+        // 已经初始化过图表 更新数据
+        this.chart.changeData(this.data)
+      } else {
+        // 没有图表 新创建一个实例
+        this.initHandler()
+      }
     }
   }
 }

src/components/G2/Line1.vue

@@ -8,21 +8,18 @@ export default {
   mixins: [
     G2Mixin
   ],
+  data () {
+    return {
+      // 在组件 mounted 后立即初始化图表
+      mountedInit: false
+    }
+  },
   methods: {
+    // 初始化图表
     initHandler () {
-      const data = [
-        { year: '1991', value: 3 },
-        { year: '1992', value: 4 },
-        { year: '1993', value: 3.5 },
-        { year: '1994', value: 5 },
-        { year: '1995', value: 4.9 },
-        { year: '1996', value: 6 },
-        { year: '1997', value: 7 },
-        { year: '1998', value: 9 },
-        { year: '1999', value: 13 }
-      ]
       this.creatChart()
-      this.chart.source(data)
+      this.setChartTitle()
+      this.chart.source(this.data)
       this.chart.scale('value', {
         min: 0
       })
@@ -34,7 +31,6 @@ export default {
           type: 'line'
         }
       })
-      this.setChartTitle('历史趋势')
       this.chart.line().position('year*value')
       this.chart.point().position('year*value').size(4).shape('circle').style({
         stroke: '#fff',

src/pages/demo/chart/index/index.vue

@@ -1,12 +1,8 @@
 <template>
   <Container type="ghost" :responsive="true" class="demo-chart-index">
-    <GridLayout
-      v-bind="layout"
-      @layout-updated="layoutUpdatedHandler">
+    <GridLayout v-bind="layout">
       <GridItem v-bind="layout.layout[0]" @resize="resizeHandler('G2Line1')" @resized="resizedHandler('G2Line1')">
-        <el-card>
-          <G2Line1 ref="G2Line1"></G2Line1>
-        </el-card>
+        <el-card><G2Line1 ref="G2Line1" :data="G2Line1Data"></G2Line1></el-card>
       </GridItem>
     </GridLayout>
   </Container>
@@ -32,15 +28,33 @@ export default {
         verticalCompact: true,
         margin: [10, 10],
         useCssTransforms: true
-      }
+      },
+      G2Line1Data: []
     }
   },
+  mounted () {
+    setTimeout(() => {
+      this.G2Line1Data = [
+        { year: '1991', value: 3 },
+        { year: '1992', value: 4 },
+        { year: '1993', value: 3.5 },
+        { year: '1994', value: 5 },
+        { year: '1995', value: 4.9 },
+        { year: '1996', value: 6 },
+        { year: '1997', value: 7 },
+        { year: '1998', value: 9 },
+        { year: '1999', value: 13 }
+      ]
+    }, 3000)
+  },
   methods: {
+    // 改变尺寸
     resizeHandler (name) {
       this.$nextTick(() => {
         this.$refs[name].resize()
       })
     },
+    // 改变尺寸完成
     resizedHandler (name) {
       this.$nextTick(() => {
         this.$refs[name].resize()
@@ -64,6 +78,8 @@ export default {
       }
     }
     .vue-resizable-handle {
+      bottom: 6px;
+      right: 6px;
       opacity: .3;
       &:hover{
         opacity: 1;