Skip to content

Commit e885e77

Browse files
author
Lison
authored
Merge pull request #1016 from iview/2.0
首页改为响应式布局,优化图表
2 parents 29b9569 + c21cf1b commit e885e77

File tree

4 files changed

+41
-23
lines changed

4 files changed

+41
-23
lines changed

src/components/charts/bar.vue

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<script>
66
import echarts from 'echarts'
77
import tdTheme from './theme.json'
8+
import { on, off } from '@/libs/tools'
89
echarts.registerTheme('tdTheme', tdTheme)
910
export default {
1011
name: 'ChartBar',
@@ -13,6 +14,16 @@ export default {
1314
text: String,
1415
subtext: String
1516
},
17+
data () {
18+
return {
19+
dom: null
20+
}
21+
},
22+
methods: {
23+
resize () {
24+
this.dom.resize()
25+
}
26+
},
1627
mounted () {
1728
this.$nextTick(() => {
1829
let xAxisData = Object.keys(this.value)
@@ -35,15 +46,13 @@ export default {
3546
type: 'bar'
3647
}]
3748
}
38-
let dom = echarts.init(this.$refs.dom, 'tdTheme')
39-
dom.setOption(option)
49+
this.dom = echarts.init(this.$refs.dom, 'tdTheme')
50+
this.dom.setOption(option)
51+
on(window, 'resize', this.resize)
4052
})
53+
},
54+
beforeDestroy () {
55+
off(window, 'resize', this.resize)
4156
}
4257
}
4358
</script>
44-
45-
<style lang="less">
46-
.charts{
47-
//
48-
}
49-
</style>

src/components/charts/pie.vue

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<script>
66
import echarts from 'echarts'
77
import tdTheme from './theme.json'
8+
import { on, off } from '@/libs/tools'
89
echarts.registerTheme('tdTheme', tdTheme)
910
export default {
1011
name: 'ChartPie',
@@ -13,6 +14,16 @@ export default {
1314
text: String,
1415
subtext: String
1516
},
17+
data () {
18+
return {
19+
dom: null
20+
}
21+
},
22+
methods: {
23+
resize () {
24+
this.dom.resize()
25+
}
26+
},
1627
mounted () {
1728
this.$nextTick(() => {
1829
let legend = this.value.map(_ => _.name)
@@ -47,15 +58,13 @@ export default {
4758
}
4859
]
4960
}
50-
let dom = echarts.init(this.$refs.dom, 'tdTheme')
51-
dom.setOption(option)
61+
this.dom = echarts.init(this.$refs.dom, 'tdTheme')
62+
this.dom.setOption(option)
63+
on(window, 'resize', this.resize)
5264
})
65+
},
66+
beforeDestroy () {
67+
off(window, 'resize', this.resize)
5368
}
5469
}
5570
</script>
56-
57-
<style lang="less">
58-
.charts{
59-
//
60-
}
61-
</style>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,11 +104,11 @@ export default {
104104
this.$nextTick(() => {
105105
this.dom = echarts.init(this.$refs.dom)
106106
this.dom.setOption(option)
107-
on(window, 'resize', this.resize())
107+
on(window, 'resize', this.resize)
108108
})
109109
},
110110
beforeDestroy () {
111-
off(window, 'resize', this.resize())
111+
off(window, 'resize', this.resize)
112112
}
113113
}
114114
</script>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
<template>
22
<div>
33
<Row :gutter="20">
4-
<i-col span="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;">
4+
<i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
55
<infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
66
<count-to :end="infor.count" count-class="count-style"/>
77
<p>{{ infor.title }}</p>
88
</infor-card>
99
</i-col>
1010
</Row>
11-
<Row :gutter="20" style="margin-top: 20px;">
12-
<i-col span="8">
11+
<Row :gutter="20" style="margin-top: 10px;">
12+
<i-col :md="24" :lg="8" style="margin-bottom: 20px;">
1313
<Card shadow>
1414
<chart-pie style="height: 300px;" :value="pieData" text="用户访问来源"></chart-pie>
1515
</Card>
1616
</i-col>
17-
<i-col span="16">
17+
<i-col :md="24" :lg="16" style="margin-bottom: 20px;">
1818
<Card shadow>
1919
<chart-bar style="height: 300px;" :value="barData" text="每周用户活跃量"/>
2020
</Card>
2121
</i-col>
2222
</Row>
23-
<Row style="margin-top: 20px;">
23+
<Row>
2424
<Card shadow>
2525
<example style="height: 310px;"/>
2626
</Card>

0 commit comments

Comments
 (0)