From ff19ab33bab97f9cad6782f4bac2ef119909ffe0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=9D=A8?= <1711467488@qq.com>
Date: Sun, 18 Feb 2018 21:50:24 +0800
Subject: [PATCH] no message

Former-commit-id: d816a37443c230fb5afee71775d2c69f8bdb5656
Former-commit-id: 9d370bfcdafc0396e8538900e2068d994e99c66e
Former-commit-id: e4362e5cd5b12df333a17db9bf9ae069f3a62f7d
---
 .../charts/G2/components/Pie/base.vue         | 75 +++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 src/components/charts/G2/components/Pie/base.vue

diff --git a/src/components/charts/G2/components/Pie/base.vue b/src/components/charts/G2/components/Pie/base.vue
new file mode 100644
index 00000000..1c4a30b4
--- /dev/null
+++ b/src/components/charts/G2/components/Pie/base.vue
@@ -0,0 +1,75 @@
+<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
+  ],
+  data () {
+    return {
+      // DataView数据转换设置
+      transformSetting: {
+        type: 'percent',
+        field: 'count',
+        dimension: 'item',
+        as: 'percent'
+      }
+    }
+  },
+  methods: {
+    dvMaker () {
+      return new this.DataSet.DataView().source(this.data).transform(this.transformSetting)
+    },
+    // 初始化图表
+    init () {
+      // mixin 中提供 creatChart
+      this.creatChart()
+      // 本组件的特殊设置
+      this.chart.source(this.dvMaker(), {
+        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()
+    },
+    // 数据源改变 重新渲染新的数据
+    changeData () {
+      this.chart.changeData(this.dvMaker())
+    }
+  }
+}
+</script>