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

Former-commit-id: 995297cf3f7394b42b3eaf5946a431159170a29d
Former-commit-id: 4ed08569885eb7542b23906245f8add653cce782
Former-commit-id: c0559ca9cc2565cc1b4ef42732a7c51cc41f8693
---
 .../chart/demo/components/ChartDemoCard.vue   |  2 +-
 static/markdownFiles/article/插件 - 多国语.md |  4 +-
 static/markdownFiles/article/组件 - 图表.md   | 69 ++++++++++++++++++-
 3 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/src/pages/demo/chart/demo/components/ChartDemoCard.vue b/src/pages/demo/chart/demo/components/ChartDemoCard.vue
index 3d9ee5b3..9ee80690 100644
--- a/src/pages/demo/chart/demo/components/ChartDemoCard.vue
+++ b/src/pages/demo/chart/demo/components/ChartDemoCard.vue
@@ -27,7 +27,7 @@ export default {
   data () {
     return {
       data: [],
-      height: 500,
+      height: 400,
       heightOptions: [300, 400, 500, 600]
     }
   },
diff --git a/static/markdownFiles/article/插件 - 多国语.md b/static/markdownFiles/article/插件 - 多国语.md
index 3d04dc56..0e67ce29 100644
--- a/static/markdownFiles/article/插件 - 多国语.md	
+++ b/static/markdownFiles/article/插件 - 多国语.md	
@@ -4,7 +4,7 @@
 
 > 此文档仅限于演示如何在 `D2Admin` 中使用多国语言设置
 
-公用的语言设置建议放在 `d2admin-vue-element/src/i18n` 下
+公用的语言设置建议放在 `src/i18n` 下
 
 i18n 文件夹结构如下所示
 
@@ -19,7 +19,7 @@ i18n 文件夹结构如下所示
 | | |__index.js // 英语 公用配置
 ```
 
-在 `d2admin-vue-element/src/i18n/index.js` 中导入同级lang文件夹内的语言设置，并导出一个新的 `VueI18n` 实例供 `main.js` 使用
+在 `src/i18n/index.js` 中导入同级lang文件夹内的语言设置，并导出一个新的 `VueI18n` 实例供 `main.js` 使用
 
 ```
 import i18n from './i18n'
diff --git a/static/markdownFiles/article/组件 - 图表.md b/static/markdownFiles/article/组件 - 图表.md
index 8d3f495d..b2a1ff1e 100644
--- a/static/markdownFiles/article/组件 - 图表.md	
+++ b/static/markdownFiles/article/组件 - 图表.md	
@@ -1 +1,68 @@
-# 介绍
\ No newline at end of file
+## 介绍
+
+D2Admin 集成了由蚂蚁金服出品的 **G2** 图表库
+
+## 实现方式
+
+`src/components/charts/register.js` 为注册图表组件的文件
+
+`src/components/charts/G2` 为图表组件存放位置
+
+`src/components/charts/G2/mixins/G2.js` 是图表最主要的文件，这是一个所有的图表组件都会使用的 mixin，这个 mixin 主要有以下用途
+
+ - 将 G2 和 DataSet 绑定到 data 上，方便组件使用，省去重复 `import G2 from '@antv/g2'` 等
+ - 将 [G2 Chart类](http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_Chart) 的属性全部暴露为 Vue 组件参数，这些参数会在初始化图表时用到
+ - 提供了额外的设置参数，比如自动高度，自动初始化，初始化延时
+ - 关闭 G2 的体验改进计划打点请求
+ - data 上的 chart 对象
+ - 自动初始化(或者不初始化)图表
+ - `creatChart` 方法，根据参数设置生成 data 上的 chart 对象
+ - `resize` 方法
+
+在图表组件中使用这个 mixin 示例
+
+```
+<template>
+  <!-- 如果需要开启自动高度功能 需要在这里设置 style="height: 100%;" -->
+  <div ref="chart" style="height: 100%;"></div>
+</template>
+
+<script>
+// 引入公用 mixin
+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.coord().transpose()
+      this.chart.interval().position('x*y')
+      // 最后一步 渲染图表 这部分每个图表都一样
+      this.chart.render()
+    },
+    // 数据源改变 重新渲染新的数据
+    changeData () {
+      this.chart.changeData(this.data)
+    }
+  }
+}
+</script>
+```
+
+上面的代码段展示了如何使用 mixin 快速制作一个图表组件，只需要在组件中重新定义 `init` 和 `changeData` 方法即可
+
+你可以修改这个 mixin 去实现更多的功能，同时影响所有的图表组件
+
+> 这只仅仅是作者个人对于图表封装的一个实现思路
+
+## 为什么没有选择其他产品
+
+G2 完全可以胜任一般的后台界面报表图表需求，而且官网文档清晰友好
+
+如果你需要更酷炫的图表，也完全可以剔除集成的库，换用 百度的[echarts](http://echarts.baidu.com/) 或者超级强大的 [d3.js](https://d3js.org/)