<template>
<div :class="className" :style="{height:height,width:width}"></div>
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
require('echarts/map/js/china') // echarts theme
import { debounce } from '@/utils'
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '720px'
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
if (this.autoResize) {
this.__resizeHanlder = debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)
window.addEventListener('resize', this.__resizeHanlder)
}
// 监听侧边栏的变化
// const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
// sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
},
beforeDestroy() {
if (!this.chart) {
return
}
if (this.autoResize) {
window.removeEventListener('resize', this.__resizeHanlder)
}
// const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
// sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)
this.chart.dispose()
this.chart = null
},
watch: {
chartData: {
deep: true,
handler(val) {
this.chart.clear()
this.setOptions(val)
}
}
},
methods: {
resize() {
this.chart.resize()
},
updateOptions({ title, data, dataRange } = { title: '分布', data: [], dataRange: { min: 0, max: 100 }}) {
this.chart.setOption({
title: {
text: title
},
dataRange: {
min: dataRange.min,
max: dataRange.max
},
series: [
{
data: data
}
]
})
},
setOptions({ title, data, dataRange } = { title: '分布', data: [], dataRange: { min: 0, max: 100 }}) {
this.chart.setOption({
title: {
text: title,
padding: [15, 0, 0, 30],
textStyle: {
color: '#000',
fontSize: 22
}
},
dataRange: {
orient: 'horizontal',
min: dataRange.min,
max: dataRange.max,
inRange: {
color: ['#fee090', '#fdae61', '#f46d43', '#d73027']
},
text: ['高', '低'], // 文本，默认为数值文本
splitNumber: 0
},
toolbox: {
show: false,
orient: 'vertical',
x: 'left',
y: 'center',
feature: {
}
},
series: [
{
name: '坐席数据',
type: 'map',
mapType: 'china',
mapLocation: {
},
selectedMode: false,
itemStyle: {
normal: { label: { show: true, formatter: function(params) {
return `${params.name}${(params.value && '\n' + params.value) || ''}`
} }},
emphasis: { label: { show: true }}
},
data: data
}
],
animation: true
})
},
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.chartData)
console.log(this.chartData)
}
}
}
</script>
<style scoped>
.count-title{
line-height: 48px;
font-size: 32px;
display: inline-block;
margin-right: 32px;
}
</style>
vue项目引入echarts出现内存泄漏问题，页面放置15到30分钟，内存飙升什么严重
这张是30分钟的
这张是刚打开的
vue 组件代码