From 0c95fc37dcb85467a2150646752ec27ca5297fe4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=9D=A8?= <1711467488@qq.com>
Date: Mon, 19 Feb 2018 12:04:59 +0800
Subject: [PATCH] no message

Former-commit-id: 4bfe822510fad9d3caab87f4ff29ce200740555e
Former-commit-id: 0336d2c16b1a871375b0d94720c950640397e10d
Former-commit-id: d8acf08adce671df5fefe8eaf573defd2f6e424f
---
 .../charts/G2/components/Radar/base.vue       | 81 +++++++++++++++++++
 src/components/charts/register.js             |  2 +
 src/mock/chart/G2Radar.js                     | 18 +++++
 src/mock/chart/register.js                    |  1 +
 src/pages/demo/chart/index/index.vue          | 16 +++-
 5 files changed, 117 insertions(+), 1 deletion(-)
 create mode 100644 src/components/charts/G2/components/Radar/base.vue
 create mode 100644 src/mock/chart/G2Radar.js

diff --git a/src/components/charts/G2/components/Radar/base.vue b/src/components/charts/G2/components/Radar/base.vue
new file mode 100644
index 00000000..df3bf3ac
--- /dev/null
+++ b/src/components/charts/G2/components/Radar/base.vue
@@ -0,0 +1,81 @@
+<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: 'fold',
+        fields: ['a', 'b'],
+        key: 'key',
+        value: 'value'
+      }
+    }
+  },
+  methods: {
+    dvMaker () {
+      return new this.DataSet.DataView().source(this.data).transform(this.transformSetting)
+    },
+    // 初始化图表
+    init () {
+      // mixin 中提供 creatChart
+      this.creatChart()
+      // 本组件的特殊设置
+      this.chart.source(this.dvMaker(), {
+        value: {
+          min: 0,
+          max: 80
+        }
+      })
+      this.chart.coord('polar', {
+        radius: 0.8
+      })
+      this.chart.axis('item', {
+        line: null,
+        tickLine: null,
+        grid: {
+          lineStyle: {
+            lineDash: null
+          },
+          hideFirstLine: false
+        }
+      })
+      this.chart.axis('value', {
+        line: null,
+        tickLine: null,
+        grid: {
+          type: 'polygon',
+          lineStyle: {
+            lineDash: null
+          }
+        }
+      })
+      this.chart.legend('key', {
+        marker: 'circle',
+        offset: 10
+      })
+      this.chart.line().position('item*value').color('key').size(2)
+      this.chart.point().position('item*value').color('key').shape('circle').size(4).style({
+        stroke: '#fff',
+        lineWidth: 1,
+        fillOpacity: 1
+      })
+      this.chart.area().position('item*value').color('key')
+      // 渲染图表
+      this.chart.render()
+    },
+    // 数据源改变 重新渲染新的数据
+    changeData () {
+      this.chart.changeData(this.dvMaker())
+    }
+  }
+}
+</script>
diff --git a/src/components/charts/register.js b/src/components/charts/register.js
index ad687675..0674bd1a 100644
--- a/src/components/charts/register.js
+++ b/src/components/charts/register.js
@@ -10,3 +10,5 @@ Vue.component('G2LineStep', resolve => { require(['@/components/charts/G2/compon
 Vue.component('G2NightingaleRoseBase', resolve => { require(['@/components/charts/G2/components/NightingaleRose/base.vue'], resolve) })
 
 Vue.component('G2PieBase', resolve => { require(['@/components/charts/G2/components/Pie/base.vue'], resolve) })
+
+Vue.component('G2RadarBase', resolve => { require(['@/components/charts/G2/components/Radar/base.vue'], resolve) })
diff --git a/src/mock/chart/G2Radar.js b/src/mock/chart/G2Radar.js
new file mode 100644
index 00000000..74c307a0
--- /dev/null
+++ b/src/mock/chart/G2Radar.js
@@ -0,0 +1,18 @@
+import Mock from 'mockjs'
+import * as fn from './_fn'
+
+Mock.mock('/api/chart/G2Radar', 'post', ({body, type, url}) => {
+  const _body = JSON.parse(body)
+  switch (_body.type) {
+    // 基础折线图
+    case 'base': {
+      return fn.returnMaker(['中国', '日本', '美国', '法国', '英国'].map(e => ({
+        item: e,
+        a: fn.r(),
+        b: fn.r()
+      })))
+    }
+    default:
+      return {}
+  }
+})
diff --git a/src/mock/chart/register.js b/src/mock/chart/register.js
index 094c2edc..53ccfee9 100644
--- a/src/mock/chart/register.js
+++ b/src/mock/chart/register.js
@@ -3,3 +3,4 @@ import './G2Column'
 import './G2Line'
 import './G2NightingaleRose'
 import './G2Pie'
+import './G2Radar'
diff --git a/src/pages/demo/chart/index/index.vue b/src/pages/demo/chart/index/index.vue
index c3e099fb..778490eb 100644
--- a/src/pages/demo/chart/index/index.vue
+++ b/src/pages/demo/chart/index/index.vue
@@ -43,6 +43,13 @@
           <G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]"></G2NightingaleRoseBase>
         </el-card>
       </GridItem>
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[6]" @resized="handleResized(chart[6].refName)">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="近年行情"></ChartCardHeader>
+          <G2RadarBase :ref="chart[6].refName" v-bind="chart[6]"></G2RadarBase>
+        </el-card>
+      </GridItem>
     </GridLayout>
   </Container>
 </template>
@@ -87,6 +94,12 @@ export default {
           refName: 'G2NightingaleRoseBase',
           data: [],
           padding: [40, 40, 40, 40]
+        },
+        {
+          api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
+          refName: 'G2RadarBase',
+          data: [],
+          padding: [30, 30, 30, 30]
         }
       ],
       layout: {
@@ -97,7 +110,8 @@ export default {
           {'x': 8, 'y': 0, 'w': 4, 'h': 7, 'i': '2'},
           {'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': 8, 'y': 7, 'w': 4, 'h': 7, 'i': '5'},
+          {'x': 0, 'y': 14, 'w': 4, 'h': 7, 'i': '6'}
         ],
         colNum: 12,
         rowHeight: 30,