Commit 3b89cde5 authored by Pan's avatar Pan

refactor: echarts addEventListener about resize

parent 59e240eb
...@@ -5,6 +5,7 @@ ...@@ -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 { ...@@ -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 @@ ...@@ -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 { ...@@ -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 { ...@@ -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' },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment