diff --git a/design.sketch.REMOVED.git-id b/design.sketch.REMOVED.git-id
index b01faaaa..58f823eb 100644
--- a/design.sketch.REMOVED.git-id
+++ b/design.sketch.REMOVED.git-id
@@ -1 +1 @@
-59cc75ac4ddfd1c2192b1543df281217eb5d77bf
\ No newline at end of file
+4bcd95302c6d5c8ed1e44b96e2ba6978b84bea68
\ No newline at end of file
diff --git a/package.json b/package.json
index ab092d61..720967eb 100755
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "clipboard-polyfill": "^2.4.1",
     "countup.js": "^1.9.3",
     "dayjs": "^1.6.7",
+    "echarts": "^4.1.0",
     "element-ui": "^2.0.11",
     "file-saver": "^1.3.3",
     "github-markdown-css": "^2.10.0",
@@ -34,6 +35,7 @@
     "path-posix": "^1.0.0",
     "quill": "^1.3.4",
     "simplemde": "^1.11.2",
+    "v-charts": "^1.17.6",
     "v-contextmenu": "^2.7.0",
     "vue": "^2.5.2",
     "vue-grid-layout": "^2.1.11",
diff --git a/src/components/core/d2-container/components/d2-container-full.vue b/src/components/core/d2-container/components/d2-container-full.vue
index dc8b222c..61fd0401 100644
--- a/src/components/core/d2-container/components/d2-container-full.vue
+++ b/src/components/core/d2-container/components/d2-container-full.vue
@@ -38,6 +38,7 @@ export default {
     flex-grow: 1;
     padding: 20px;
     overflow: auto;
+    position: relative;
   }
   .d2-container-full__footer {
     padding: 20px;
diff --git a/src/components/demo/register.js b/src/components/demo/register.js
index 8d9990d6..30db88c6 100644
--- a/src/components/demo/register.js
+++ b/src/components/demo/register.js
@@ -1,5 +1,7 @@
 import Vue from 'vue'
 
-Vue.component('d2-demo-link-btn', () => import('@/components/demo/d2-demo-link-btn'))
+import d2DemoLinkBtn from '@/components/demo/d2-demo-link-btn'
+
+Vue.component('d2-demo-link-btn', d2DemoLinkBtn)
 Vue.component('d2-demo-page-header', () => import('@/components/demo/d2-demo-page-header'))
 Vue.component('d2-demo-page-cover', () => import('@/components/demo/d2-demo-page-cover'))
diff --git a/src/main.js b/src/main.js
index 3bf4ae78..0777cec0 100755
--- a/src/main.js
+++ b/src/main.js
@@ -8,6 +8,9 @@ import i18n from './i18n'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 
+// v-charts
+import VCharts from 'v-charts'
+
 // font-awesome
 import '@/assets/library/font-awesome-4.7.0/css/font-awesome.min.css'
 
@@ -53,6 +56,7 @@ import bigdataTable from '@/plugin/vue-bigdata-table'
 import buildConfig from '../config/index'
 
 Vue.use(ElementUI)
+Vue.use(VCharts)
 Vue.use(contentmenu)
 
 Vue.use(pluginImport)
diff --git a/src/menu/index.js b/src/menu/index.js
index 38910874..d3ec8225 100644
--- a/src/menu/index.js
+++ b/src/menu/index.js
@@ -116,11 +116,37 @@ const demoComponents = {
   ])('/demo/components/')
 }
 
+// 路由菜单 组件
+const demoCharts = {
+  path: '/demo/charts',
+  title: '图表',
+  icon: 'line-chart',
+  children: (pre => [
+    { path: `${pre}index`, title: '图表首页' },
+    {
+      path: `${pre}list`,
+      title: '图表',
+      children: [
+        {
+          path: `${pre}list/line`,
+          title: '折线图',
+          children: [
+            { path: `${pre}list/line/demo1`, title: '示例' },
+            { path: `${pre}list/line/demo2`, title: '横坐标的倾斜' },
+            { path: `${pre}list/line/demo3`, title: '堆叠面积图' },
+            { path: `${pre}list/line/demo4`, title: '显示指标数值' }
+          ]
+        }
+      ]
+    }
+  ])('/demo/charts/')
+}
+
 // 路由菜单 组件库
 const demoElement = {
   path: '/demo/element',
   title: 'Element 组件库',
-  icon: 'puzzle-piece',
+  icon: 'cubes',
   children: (pre => [
     { path: `${pre}index`, title: '组件库首页' },
     {
@@ -210,6 +236,7 @@ const demoElement = {
 export const side = [
   demoPlugins,
   demoComponents,
+  demoCharts,
   demoElement
 ]
 
@@ -225,6 +252,7 @@ export default [
     children: [
       demoPlugins,
       demoComponents,
+      demoCharts,
       demoElement,
       {
         title: '空菜单演示',
diff --git a/src/pages/demo/charts/index/index.vue b/src/pages/demo/charts/index/index.vue
new file mode 100644
index 00000000..54901b08
--- /dev/null
+++ b/src/pages/demo/charts/index/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <d2-container type="full">
+    <d2-demo-page-cover
+      title="图表"
+      sub-title="集成图表组件">
+      <img :src="`${$assetsPublicPath}static/image/icon/500/charts.png`">
+    </d2-demo-page-cover>
+  </d2-container>
+</template>
\ No newline at end of file
diff --git a/src/pages/demo/charts/list/_mixin/list.js b/src/pages/demo/charts/list/_mixin/list.js
new file mode 100644
index 00000000..8a33ee3a
--- /dev/null
+++ b/src/pages/demo/charts/list/_mixin/list.js
@@ -0,0 +1,9 @@
+export default {
+  data () {
+    return {
+      pubSetting: {
+        height: '100%'
+      }
+    }
+  }
+}
diff --git a/src/pages/demo/charts/list/line/demo1/index.vue b/src/pages/demo/charts/list/line/demo1/index.vue
new file mode 100644
index 00000000..80ed2854
--- /dev/null
+++ b/src/pages/demo/charts/list/line/demo1/index.vue
@@ -0,0 +1,45 @@
+<template>
+  <d2-container type="full">
+    <template slot="header">示例</template>
+    <div class="inner">
+      <ve-line :data="chartData" v-bind="pubSetting"></ve-line>
+    </div>
+    <template slot="footer">
+      <d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import list from '@/pages/demo/charts/list/_mixin/list.js'
+export default {
+  mixins: [
+    list
+  ],
+  data: function () {
+    return {
+      chartData: {
+        columns: ['日期', '访问用户', '下单用户', '下单率'],
+        rows: [
+          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.inner {
+  position: absolute;
+  top: 20px;
+  right:  20px;
+  bottom: 20px;
+  left: 20px;
+}
+</style>
diff --git a/src/pages/demo/charts/list/line/demo2/index.vue b/src/pages/demo/charts/list/line/demo2/index.vue
new file mode 100644
index 00000000..882651cf
--- /dev/null
+++ b/src/pages/demo/charts/list/line/demo2/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <d2-container type="full">
+    <template slot="header">横坐标的倾斜</template>
+    <div class="inner">
+      <ve-line :data="chartData" :extend="extend" v-bind="pubSetting"></ve-line>
+    </div>
+    <template slot="footer">
+      <d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import list from '@/pages/demo/charts/list/_mixin/list.js'
+export default {
+  mixins: [
+    list
+  ],
+  data: function () {
+    this.extend = {
+      'xAxis.0.axisLabel.rotate': 45
+    }
+    return {
+      chartData: {
+        columns: ['日期', '访问用户', '下单用户', '下单率'],
+        rows: [
+          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 },
+          { '日期': '1/7', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { '日期': '1/8', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { '日期': '1/9', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { '日期': '1/10', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { '日期': '1/11', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { '日期': '1/12', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.inner {
+  position: absolute;
+  top: 20px;
+  right:  20px;
+  bottom: 20px;
+  left: 20px;
+}
+</style>
diff --git a/src/pages/demo/charts/list/line/demo3/index.vue b/src/pages/demo/charts/list/line/demo3/index.vue
new file mode 100644
index 00000000..12bca441
--- /dev/null
+++ b/src/pages/demo/charts/list/line/demo3/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <d2-container type="full">
+    <template slot="header">堆叠面积图</template>
+    <div class="inner">
+      <ve-line :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-line>
+    </div>
+    <template slot="footer">
+      <d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import list from '@/pages/demo/charts/list/_mixin/list.js'
+export default {
+  mixins: [
+    list
+  ],
+  data () {
+    this.chartSettings = {
+      stack: { '用户': ['访问用户', '下单用户'] },
+      area: true
+    }
+    return {
+      chartData: {
+        columns: ['日期', '访问用户', '下单用户', '下单率'],
+        rows: [
+          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.inner {
+  position: absolute;
+  top: 20px;
+  right:  20px;
+  bottom: 20px;
+  left: 20px;
+}
+</style>
diff --git a/src/pages/demo/charts/list/line/demo4/index.vue b/src/pages/demo/charts/list/line/demo4/index.vue
new file mode 100644
index 00000000..1eb4dcf2
--- /dev/null
+++ b/src/pages/demo/charts/list/line/demo4/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <d2-container type="full">
+    <template slot="header">显示指标数值</template>
+    <div class="inner">
+      <ve-line :data="chartData" :extend="extend" v-bind="pubSetting"></ve-line>
+    </div>
+    <template slot="footer">
+      <d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import list from '@/pages/demo/charts/list/_mixin/list.js'
+export default {
+  mixins: [
+    list
+  ],
+  data () {
+    this.extend = {
+      series: {
+        label: {
+          normal: {
+            show: true
+          }
+        }
+      }
+    }
+    return {
+      chartData: {
+        columns: ['日期', '访问用户', '下单用户', '下单率'],
+        rows: [
+          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.inner {
+  position: absolute;
+  top: 20px;
+  right:  20px;
+  bottom: 20px;
+  left: 20px;
+}
+</style>
diff --git a/src/router/index.js.REMOVED.git-id b/src/router/index.js.REMOVED.git-id
index 7f166dbd..ff0de9bd 100644
--- a/src/router/index.js.REMOVED.git-id
+++ b/src/router/index.js.REMOVED.git-id
@@ -1 +1 @@
-89e063c3ddd8c257b9e34b7c88bc6d39efbc4ad5
\ No newline at end of file
+75041a6a688f975cc1b62327c7bb6c7fa8358afc
\ No newline at end of file
diff --git a/static/image/icon/500/chart.png.REMOVED.git-id b/static/image/icon/500/charts.png.REMOVED.git-id
similarity index 100%
rename from static/image/icon/500/chart.png.REMOVED.git-id
rename to static/image/icon/500/charts.png.REMOVED.git-id