refactor: echarts addEventListener about resize
This commit is contained in:
parent
59e240eb9a
commit
3b89cde53a
|
@ -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
|
||||||
},
|
},
|
||||||
|
|
|
@ -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' },
|
||||||
|
|
Loading…
Reference in New Issue