diff --git a/src/components/charts/G2/components/Area/base.vue b/src/components/charts/G2/components/Area/base.vue
new file mode 100644
index 00000000..c7b08880
--- /dev/null
+++ b/src/components/charts/G2/components/Area/base.vue
@@ -0,0 +1,35 @@
+<template>
+  <!-- 如果需要开启自动高度功能 需要在这里设置 style="height: 100%;" -->
+  <div ref="chart" style="height: 100%;"></div>
+</template>
+
+<script>
+import G2 from '@/components/charts/G2/mixins/G2.js'
+export default {
+  mixins: [
+    G2
+  ],
+  methods: {
+    // 初始化图表
+    init () {
+      // mixin 中提供 creatChart
+      this.creatChart()
+      // 本组件的特殊设置
+      this.chart.source(this.data)
+      this.chart.axis('x', {
+        label: {
+          offset: 12
+        }
+      })
+      this.chart.coord().transpose()
+      this.chart.interval().position('x*y')
+      // 渲染图表
+      this.chart.render()
+    },
+    // 数据源改变 重新渲染新的数据
+    changeData () {
+      this.chart.changeData(this.data)
+    }
+  }
+}
+</script>
diff --git a/src/components/charts/register.js b/src/components/charts/register.js
index 0674bd1a..0b703f3f 100644
--- a/src/components/charts/register.js
+++ b/src/components/charts/register.js
@@ -1,5 +1,7 @@
 import Vue from 'vue'
 
+Vue.component('G2AreaBase', resolve => { require(['@/components/charts/G2/components/Area/base.vue'], resolve) })
+
 Vue.component('G2BarBase', resolve => { require(['@/components/charts/G2/components/Bar/base.vue'], resolve) })
 
 Vue.component('G2ColumnBase', resolve => { require(['@/components/charts/G2/components/Column/base.vue'], resolve) })
diff --git a/src/mock/chart/G2Area.js b/src/mock/chart/G2Area.js
new file mode 100644
index 00000000..d4d3ba2d
--- /dev/null
+++ b/src/mock/chart/G2Area.js
@@ -0,0 +1,14 @@
+import Mock from 'mockjs'
+import * as fn from './_fn'
+
+Mock.mock('/api/chart/G2Area', 'post', ({body, type, url}) => {
+  const _body = JSON.parse(body)
+  switch (_body.type) {
+    // 基础折线图
+    case 'base': {
+      return fn.returnMaker(['3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'].map(x => ({x, y: fn.r()})))
+    }
+    default:
+      return {}
+  }
+})
diff --git a/src/mock/chart/register.js b/src/mock/chart/register.js
index 53ccfee9..c58bfcdb 100644
--- a/src/mock/chart/register.js
+++ b/src/mock/chart/register.js
@@ -1,3 +1,4 @@
+import './G2Area'
 import './G2Bar'
 import './G2Column'
 import './G2Line'
diff --git a/src/pages/demo/chart/index/index.vue b/src/pages/demo/chart/index/index.vue
index 778490eb..6bacb95c 100644
--- a/src/pages/demo/chart/index/index.vue
+++ b/src/pages/demo/chart/index/index.vue
@@ -50,6 +50,13 @@
           <G2RadarBase :ref="chart[6].refName" v-bind="chart[6]"></G2RadarBase>
         </el-card>
       </GridItem>
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[7]" @resized="handleResized(chart[7].refName)">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="近年行情"></ChartCardHeader>
+          <G2AreaBase :ref="chart[7].refName" v-bind="chart[7]"></G2AreaBase>
+        </el-card>
+      </GridItem>
     </GridLayout>
   </Container>
 </template>
@@ -100,6 +107,12 @@ export default {
           refName: 'G2RadarBase',
           data: [],
           padding: [30, 30, 30, 30]
+        },
+        {
+          api: {url: '/api/chart/G2Area', data: {type: 'base'}},
+          refName: 'G2AreaBase',
+          data: [],
+          padding: [30, 30, 30, 30]
         }
       ],
       layout: {
@@ -111,7 +124,8 @@ export default {
           {'x': 0, 'y': 7, 'w': 4, 'h': 7, 'i': '3'},
           {'x': 4, 'y': 7, 'w': 4, 'h': 7, 'i': '4'},
           {'x': 8, 'y': 7, 'w': 4, 'h': 7, 'i': '5'},
-          {'x': 0, 'y': 14, 'w': 4, 'h': 7, 'i': '6'}
+          {'x': 0, 'y': 14, 'w': 4, 'h': 7, 'i': '6'},
+          {'x': 4, 'y': 14, 'w': 4, 'h': 7, 'i': '7'}
         ],
         colNum: 12,
         rowHeight: 30,