refactor: echarts addEventListener about resize

This commit is contained in:
Pan 2017-10-31 17:25:57 +08:00
parent 59e240eb9a
commit 3b89cde53a
2 changed files with 17 additions and 0 deletions

View file

@ -5,6 +5,7 @@
<script> <script>
import echarts from 'echarts' import echarts from 'echarts'
require('echarts/theme/macarons') // echarts require('echarts/theme/macarons') // echarts
import { debounce } from '@/utils'
const animationDuration = 3000 const animationDuration = 3000
export default { export default {
@ -29,11 +30,18 @@ export default {
}, },
mounted() { mounted() {
this.initChart() this.initChart()
this.__resizeHanlder = debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)
window.addEventListener('resize', this.__resizeHanlder)
}, },
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
return return
} }
window.removeEventListener('resize', this.__resizeHanlder)
this.chart.dispose() this.chart.dispose()
this.chart = null this.chart = null
}, },

View file

@ -5,6 +5,7 @@
<script> <script>
import echarts from 'echarts' import echarts from 'echarts'
require('echarts/theme/macarons') // echarts require('echarts/theme/macarons') // echarts
import { debounce } from '@/utils'
export default { export default {
props: { props: {
@ -28,11 +29,18 @@ export default {
}, },
mounted() { mounted() {
this.initChart() this.initChart()
this.__resizeHanlder = debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)
window.addEventListener('resize', this.__resizeHanlder)
}, },
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
return return
} }
window.removeEventListener('resize', this.__resizeHanlder)
this.chart.dispose() this.chart.dispose()
this.chart = null this.chart = null
}, },
@ -60,6 +68,7 @@ export default {
name: 'WEEKLY WRITE ARTICLES', name: 'WEEKLY WRITE ARTICLES',
type: 'pie', type: 'pie',
roseType: 'radius', roseType: 'radius',
radius: [10, 90],
data: [ data: [
{ value: 320, name: 'industries' }, { value: 320, name: 'industries' },
{ value: 240, name: 'technology' }, { value: 240, name: 'technology' },