From a07663930fac105ef342715af6fd301e8d2a1284 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=9D=A8?= <1711467488@qq.com>
Date: Mon, 29 Jan 2018 14:20:21 +0800
Subject: [PATCH] no message

Former-commit-id: cbe5de15fe66d496fcbba1d55727996338a1ac48
Former-commit-id: 8d7e5d347842c2ea865a237bc78c3c94cabd80d6
Former-commit-id: 63cca7ede559cb0c22f637e78c5bec5163d87938
---
 src/components/G2/Pie/1.vue          | 119 +++++++++++++++++++++++++++
 src/components/G2/index.js           |   1 +
 src/components/G2/mixins/G2.js       |   2 +-
 src/pages/demo/chart/index/index.vue |   7 +-
 4 files changed, 125 insertions(+), 4 deletions(-)
 create mode 100644 src/components/G2/Pie/1.vue

diff --git a/src/components/G2/Pie/1.vue b/src/components/G2/Pie/1.vue
new file mode 100644
index 00000000..89a49cc0
--- /dev/null
+++ b/src/components/G2/Pie/1.vue
@@ -0,0 +1,119 @@
+<template>
+  <div ref="chart" style="height: 100%;"></div>
+</template>
+
+<script>
+import G2Mixin from '../mixins/G2'
+export default {
+  mixins: [
+    G2Mixin
+  ],
+  methods: {
+    // 初始化图表
+    initHandler () {
+      const { DataView } = this.dataSet
+      const data = [
+        { item: '事例一', count: 40 },
+        { item: '事例二', count: 21 },
+        { item: '事例三', count: 17 },
+        { item: '事例四', count: 13 },
+        { item: '事例五', count: 9 }
+      ]
+      const dv = new DataView()
+      dv.source(data).transform({
+        type: 'percent',
+        field: 'count',
+        dimension: 'item',
+        as: 'percent'
+      })
+      this.chart = new this.G2.Chart({
+        container: this.$refs.chart,
+        forceFit: this.forceFit,
+        height: this.G2.DomUtil.getHeight(this.$refs.chart),
+        padding: this.padding
+      })
+      this.chart.source(dv, {
+        percent: {
+          formatter: val => {
+            val = (val * 100) + '%'
+            return val
+          }
+        }
+      })
+      this.chart.coord('theta', {
+        radius: 0.75
+      })
+      this.chart.tooltip({
+        showTitle: false,
+        itemTpl: '<li><span style="background-color:{color}" class="g2-tooltip-marker"></span>{name}: {value}</li>'
+      })
+      this.chart.intervalStack()
+        .position('percent')
+        .color('item')
+        .label('percent', {
+          formatter: (val, item) => {
+            return item.point.item + ': ' + val
+          }
+        })
+        .tooltip('item*percent', (item, percent) => {
+          percent = percent * 100 + '%'
+          return {
+            name: item,
+            value: percent
+          }
+        })
+        .style({
+          lineWidth: 1,
+          stroke: '#fff'
+        })
+      this.chart.render()
+      // this.chart = new this.G2.Chart({
+      //   container: this.$refs.chart,
+      //   forceFit: this.forceFit,
+      //   height: this.G2.DomUtil.getHeight(this.$refs.chart),
+      //   padding: this.padding
+      // })
+      // this.chart.guide().text({
+      //   top: true,
+      //   position: ['min', 'max'],
+      //   content: this.title,
+      //   style: {
+      //     fill: '#666', // 文本颜色
+      //     fontSize: '16', // 文本大小
+      //     fontWeight: 'bold' // 文本粗细
+      //   },
+      //   offsetX: 0,
+      //   offsetY: 0
+      // })
+      // this.chart.source(this.data)
+      // this.chart.scale('value', {
+      //   min: 0
+      // })
+      // this.chart.scale('year', {
+      //   range: [0, 1]
+      // })
+      // this.chart.tooltip({
+      //   crosshairs: {
+      //     type: 'line'
+      //   }
+      // })
+      // this.chart.line().position('year*value')
+      // this.chart.point().position('year*value').size(4).shape('circle').style({
+      //   stroke: '#fff',
+      //   lineWidth: 1
+      // })
+      // this.chart.render()
+    },
+    // 数据源改变 重新渲染新的数据
+    changeData () {
+      if (this.chart) {
+        // 已经初始化过图表 更新数据
+        this.chart.changeData(this.data)
+      } else {
+        // 没有图表 新创建一个实例
+        this.initHandler()
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/G2/index.js b/src/components/G2/index.js
index 66b057d7..dfcdcbdf 100644
--- a/src/components/G2/index.js
+++ b/src/components/G2/index.js
@@ -1,3 +1,4 @@
 import Vue from 'vue'
 
 Vue.component('G2Line1', resolve => { require(['@/components/G2/Line/1.vue'], resolve) })
+Vue.component('G2Pie1', resolve => { require(['@/components/G2/Pie/1.vue'], resolve) })
diff --git a/src/components/G2/mixins/G2.js b/src/components/G2/mixins/G2.js
index 15ac6b03..5f79dade 100644
--- a/src/components/G2/mixins/G2.js
+++ b/src/components/G2/mixins/G2.js
@@ -33,7 +33,7 @@ export default {
     padding: {
       type: Array,
       required: false,
-      default: () => [40, 40, 50, 60]
+      default: () => [50, 50, 50, 50]
     },
     // [图表设置项] 开启自动填充父元素高度
     autoHeight: {
diff --git a/src/pages/demo/chart/index/index.vue b/src/pages/demo/chart/index/index.vue
index a29c2e6e..4df4f8e9 100644
--- a/src/pages/demo/chart/index/index.vue
+++ b/src/pages/demo/chart/index/index.vue
@@ -10,13 +10,14 @@
           </G2Line1>
         </el-card>
       </GridItem>
-      <GridItem v-bind="layout.layout[1]" @resize="resizeHandler('G2Line2')" @resized="resizedHandler('G2Line2')">
+      <GridItem v-bind="layout.layout[1]" @resize="resizeHandler('G2Pie1')" @resized="resizedHandler('G2Pie1')">
         <el-card>
-          <G2Line1
+          <!-- <G2Line1
             ref="G2Line2"
             :data="G2Line1"
             title="近年趋势2">
-          </G2Line1>
+          </G2Line1> -->
+          <G2Pie1 ref="G2Pie1"></G2Pie1>
         </el-card>
       </GridItem>
     </GridLayout>