Merge pull request #1016 from iview/2.0

首页改为响应式布局，优化图表

src/components/charts/bar.vue

@@ -5,6 +5,7 @@
 <script>
 import echarts from 'echarts'
 import tdTheme from './theme.json'
+import { on, off } from '@/libs/tools'
 echarts.registerTheme('tdTheme', tdTheme)
 export default {
   name: 'ChartBar',
@@ -13,6 +14,16 @@ export default {
     text: String,
     subtext: String
   },
+  data () {
+    return {
+      dom: null
+    }
+  },
+  methods: {
+    resize () {
+      this.dom.resize()
+    }
+  },
   mounted () {
     this.$nextTick(() => {
       let xAxisData = Object.keys(this.value)
@@ -35,15 +46,13 @@ export default {
           type: 'bar'
         }]
       }
-      let dom = echarts.init(this.$refs.dom, 'tdTheme')
-      dom.setOption(option)
+      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
+      this.dom.setOption(option)
+      on(window, 'resize', this.resize)
     })
+  },
+  beforeDestroy () {
+    off(window, 'resize', this.resize)
   }
 }
 </script>
-
-<style lang="less">
-.charts{
-  //
-}
-</style>

src/components/charts/pie.vue

@@ -5,6 +5,7 @@
 <script>
 import echarts from 'echarts'
 import tdTheme from './theme.json'
+import { on, off } from '@/libs/tools'
 echarts.registerTheme('tdTheme', tdTheme)
 export default {
   name: 'ChartPie',
@@ -13,6 +14,16 @@ export default {
     text: String,
     subtext: String
   },
+  data () {
+    return {
+      dom: null
+    }
+  },
+  methods: {
+    resize () {
+      this.dom.resize()
+    }
+  },
   mounted () {
     this.$nextTick(() => {
       let legend = this.value.map(_ => _.name)
@@ -47,15 +58,13 @@ export default {
           }
         ]
       }
-      let dom = echarts.init(this.$refs.dom, 'tdTheme')
-      dom.setOption(option)
+      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
+      this.dom.setOption(option)
+      on(window, 'resize', this.resize)
     })
+  },
+  beforeDestroy () {
+    off(window, 'resize', this.resize)
   }
 }
 </script>
-
-<style lang="less">
-.charts{
-  //
-}
-</style>

src/view/single-page/home/example.vue

@@ -104,11 +104,11 @@ export default {
     this.$nextTick(() => {
       this.dom = echarts.init(this.$refs.dom)
       this.dom.setOption(option)
-      on(window, 'resize', this.resize())
+      on(window, 'resize', this.resize)
     })
   },
   beforeDestroy () {
-    off(window, 'resize', this.resize())
+    off(window, 'resize', this.resize)
   }
 }
 </script>

src/view/single-page/home/home.vue

@@ -1,26 +1,26 @@
 <template>
   <div>
     <Row :gutter="20">
-      <i-col span="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;">
+      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
         <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
           <count-to :end="infor.count" count-class="count-style"/>
           <p>{{ infor.title }}</p>
         </infor-card>
       </i-col>
     </Row>
-    <Row :gutter="20" style="margin-top: 20px;">
-      <i-col span="8">
+    <Row :gutter="20" style="margin-top: 10px;">
+      <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
         <Card shadow>
           <chart-pie style="height: 300px;" :value="pieData" text="用户访问来源"></chart-pie>
         </Card>
       </i-col>
-      <i-col span="16">
+      <i-col :md="24" :lg="16" style="margin-bottom: 20px;">
         <Card shadow>
           <chart-bar style="height: 300px;" :value="barData" text="每周用户活跃量"/>
         </Card>
       </i-col>
     </Row>
-    <Row style="margin-top: 20px;">
+    <Row>
       <Card shadow>
         <example style="height: 310px;"/>
       </Card>