no message

Former-commit-id: 4e2b70f39988d12d3c35d3a65d2e45d38b9400bd
Former-commit-id: 18d0fc7198f5cc85ec7632df36c4b0da9f427b59
Former-commit-id: 319d928b8f6b20fde0650595f7a84c20b8287c53

package.json

@@ -11,6 +11,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "@antv/data-set": "^0.8.5",
     "@antv/g2": "^3.0.4",
     "axios": "^0.17.1",
     "clipboard-polyfill": "^2.4.1",

src/components/G2/Line/1.vue

@@ -3,17 +3,11 @@
 </template>
 
 <script>
-import G2Mixin from './G2'
+import G2Mixin from '../mixins/G2'
 export default {
   mixins: [
     G2Mixin
   ],
-  data () {
-    return {
-      // 在组件 mounted 后立即初始化图表
-      mountedInit: false
-    }
-  },
   methods: {
     // 初始化图表
     initHandler () {
@@ -37,6 +31,16 @@ export default {
         lineWidth: 1
       })
       this.chart.render()
+    },
+    // 数据源改变 重新渲染新的数据
+    changeData () {
+      if (this.chart) {
+        // 已经初始化过图表 更新数据
+        this.chart.changeData(this.data)
+      } else {
+        // 没有图表 新创建一个实例
+        this.initHandler()
+      }
     }
   }
 }

src/components/G2/index.js

@@ -1,3 +1,3 @@
 import Vue from 'vue'
 
-Vue.component('G2Line1', resolve => { require(['@/components/G2/Line1.vue'], resolve) })
+Vue.component('G2Line1', resolve => { require(['@/components/G2/Line/1.vue'], resolve) })

src/components/G2/mixins/G2.js

@@ -1,38 +1,62 @@
 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: () => []
+    },
+    // 在组件 mounted 后立即初始化图表
+    autoInit: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // [图表设置项] 标题
+    title: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    // [图表设置项] 高度
+    height: {
+      type: Number,
+      required: false,
+      default: 300
+    },
+    // [图表设置项] padding
+    padding: {
+      type: Array,
+      required: false,
+      default: () => [40, 40, 50, 60]
+    },
+    // [图表设置项] 开启自动填充父元素高度
+    autoHeight: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data () {
     return {
-      // 库 在页面中不需要再引入 直接使用 this.G2
+      // 在页面中不需要再引入 直接使用 this.G2
       G2,
+      // 数据处理模块
+      dataSet,
       // 图表实例
       chart: null,
-      // 在组件 mounted 后立即初始化图表
-      mountedInit: true,
-      // [图表设置项] 标题
-      title: '标题',
-      // [图表设置项] 高度
-      height: 300,
-      // [图表设置项] 开启自动填充父元素高度
-      autoHeight: true,
       // [图表设置项] 自动宽度
-      forceFit: true,
+      forceFit: true
-      // [图表设置项] padding
-      padding: [40, 40, 50, 60]
     }
   },
   mounted () {
     // 如果设置了在 mounted 后自动初始化 就在这里初始化
-    if (this.mountedInit) {
+    if (this.autoInit) {
       setTimeout(() => {
         this.initHandler()
       }, 0)
@@ -56,6 +80,9 @@ export default {
     },
     // 设置图表的标题
     setChartTitle () {
+      if (!this.title) {
+        return
+      }
       this.chart.guide().text({
         top: true,
         position: ['min', 'max'],
@@ -74,16 +101,6 @@ export default {
       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/pages/demo/chart/index/index.vue

@@ -2,7 +2,22 @@
   <Container type="ghost" :responsive="true" class="demo-chart-index">
     <GridLayout v-bind="layout">
       <GridItem v-bind="layout.layout[0]" @resize="resizeHandler('G2Line1')" @resized="resizedHandler('G2Line1')">
-        <el-card><G2Line1 ref="G2Line1" :data="G2Line1"></G2Line1></el-card>
+        <el-card>
+          <G2Line1
+            ref="G2Line1"
+            :data="G2Line1"
+            title="近年趋势">
+          </G2Line1>
+        </el-card>
+      </GridItem>
+      <GridItem v-bind="layout.layout[1]" @resize="resizeHandler('G2Line2')" @resized="resizedHandler('G2Line2')">
+        <el-card>
+          <G2Line1
+            ref="G2Line2"
+            :data="G2Line1"
+            title="近年趋势2">
+          </G2Line1>
+        </el-card>
       </GridItem>
     </GridLayout>
   </Container>

src/router/menu/_plugin.js

@@ -213,7 +213,7 @@ export const menu = {
     },
     // markdown 解析库
     {
-      title: 'MD解析',
+      title: 'markdown解析',
       icon: 'font',
       children: [
         {