no message

Former-commit-id: 511753a92afc6b4e155dd92c08a769a45e6bff95
Former-commit-id: f75b803d390be369bf7ddd532efeafe6f65b4f4b
Former-commit-id: 930e77ed313f139b66cae13179bb677f88f2f8c9

src/components/charts/G2/components/Line/base.vue

@@ -32,6 +32,7 @@ export default {
         stroke: '#fff',
         lineWidth: 1
       })
+      // 渲染图表
       this.chart.render()
     },
     // 数据源改变 重新渲染新的数据

src/components/charts/G2/components/Line/step.vue

@@ -0,0 +1,33 @@
+<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
+  ],
+  methods: {
+    // 初始化图表
+    init () {
+      // mixin 中提供 creatChart
+      this.creatChart()
+      // 本组件的特殊设置
+      this.chart.source(this.data, {
+        month: {
+          range: [0, 1]
+        }
+      })
+      this.chart.line().position('month*value').shape('hv')
+      // 渲染图表
+      this.chart.render()
+    },
+    // 数据源改变 重新渲染新的数据
+    changeData () {
+      this.chart.changeData(this.data)
+    }
+  }
+}
+</script>

src/components/charts/index.js

@@ -1,3 +1,4 @@
 import Vue from 'vue'
 
 Vue.component('G2LineBase', resolve => { require(['@/components/charts/G2/components/Line/base.vue'], resolve) })
+Vue.component('G2LineStep', resolve => { require(['@/components/charts/G2/components/Line/step.vue'], resolve) })

src/mock/chart/G2Column.js

@@ -1,22 +0,0 @@
-import Mock from 'mockjs'
-
-Mock.mock('/api/chart/G2Column', 'post', ({body, type, url}) => {
-  const _body = JSON.parse(body)
-  switch (_body.code) {
-    case 1:
-      return {
-        code: 0,
-        msg: '请求成功',
-        data: [
-          { year: '1951', sales: 38 },
-          { year: '1952', sales: 52 },
-          { year: '1956', sales: 61 },
-          { year: '1957', sales: 145 },
-          { year: '1958', sales: 48 },
-          { year: '1959', sales: 38 }
-        ]
-      }
-    default:
-      return {}
-  }
-})

src/mock/chart/G2Line.js

@@ -7,20 +7,13 @@ const r = (add = 0) => {
 Mock.mock('/api/chart/G2Line', 'post', ({body, type, url}) => {
   const _body = JSON.parse(body)
   switch (_body.code) {
-    case 1:
+    case 1: {
       let lastValue = 0
-      const temp = [
+      const year = ['1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999']
-        { year: '1991', value: 0 },
+      const data = year.map(y => ({
-        { year: '1992', value: 0 },
+        year: y,
-        { year: '1993', value: 0 },
+        value: 0
-        { year: '1994', value: 0 },
+      })).map(e => {
-        { year: '1995', value: 0 },
-        { year: '1996', value: 0 },
-        { year: '1997', value: 0 },
-        { year: '1998', value: 0 },
-        { year: '1999', value: 0 }
-      ]
-      const data = temp.map(e => {
         e.value = lastValue + r()
         lastValue = e.value
         return e
@@ -31,6 +24,22 @@ Mock.mock('/api/chart/G2Line', 'post', ({body, type, url}) => {
         msg: '请求成功',
         data
       }
+    }
+    case 2: {
+      const month = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+      const data = month.map(y => ({
+        month: y,
+        value: 0
+      })).map(e => {
+        e.value = r()
+        return e
+      })
+      return {
+        code: 0,
+        msg: '请求成功',
+        data
+      }
+    }
     default:
       return {}
   }

src/mock/chart/G2Pie.js

@@ -1,20 +0,0 @@
-import Mock from 'mockjs'
-
-Mock.mock('/api/chart/G2Pie', 'post', ({body, type, url}) => {
-  const _body = JSON.parse(body)
-  switch (_body.code) {
-    case 1:
-      return {
-        code: 0,
-        msg: '请求成功',
-        data: [
-          { item: '分类1', count: 40 },
-          { item: '分类2', count: 21 },
-          { item: '分类3', count: 17 },
-          { item: '分类4', count: 22 }
-        ]
-      }
-    default:
-      return {}
-  }
-})

src/mock/chart/index.js

@@ -1,3 +1 @@
 import './G2Line'
-import './G2Pie'
-import './G2Column'

src/pages/demo/chart/index/index.vue

@@ -9,10 +9,10 @@
         </el-card>
       </GridItem>
       <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[1]" @resized="handleResized('G2LineBase1')">
+      <GridItem v-bind="layout.layout[1]" @resized="handleResized('G2LineStep1')">
         <el-card class="header-in">
           <ChartCardHeader slot="header" title="近年行情" @refresh="handleRefreshData(1)"></ChartCardHeader>
-          <G2LineBase ref="G2LineBase1" v-bind="chart[1]"></G2LineBase>
+          <G2LineStep ref="G2LineStep1" v-bind="chart[1]"></G2LineStep>
         </el-card>
       </GridItem>
     </GridLayout>
@@ -34,7 +34,7 @@ export default {
           padding: [30, 40, 50, 50]
         },
         {
-          api: {url: '/api/chart/G2Line', data: {code: 1}},
+          api: {url: '/api/chart/G2Line', data: {code: 2}},
           data: [],
           padding: [30, 40, 50, 50]
         }
@@ -42,8 +42,8 @@ export default {
       layout: {
         // 调整布局时 复制 layoutUpdatedHandler() 输出的日志到这里
         layout: [
-          {'x': 0, 'y': 0, 'w': 8, 'h': 9, 'i': '0'},
+          {'x': 0, 'y': 0, 'w': 7, 'h': 9, 'i': '0'},
-          {'x': 8, 'y': 0, 'w': 4, 'h': 9, 'i': '1'},
+          {'x': 7, 'y': 0, 'w': 5, 'h': 9, 'i': '1'},
           {'x': 0, 'y': 9, 'w': 4, 'h': 7, 'i': '2'}
         ],
         colNum: 12,