[GitHub] [incubator-echarts] littleflyfly0610 commented on issue #11776: 使用echarts内存溢出的问题

[GitBox]

littleflyfly0610 commented on issue #11776: 使用echarts内存溢出的问题
URL: 
https://github.com/apache/incubator-echarts/issues/11776#issuecomment-561460291
 
 
   <template>
       <div class="barChartBox" :id="chartId" v-on-echart-resize></div>
   </template>
   <script>
   ..........
   .........
   export default {
       name:'BarChart',
       data () {
           return {
               colorList: 
['#0898D9','#8A86F6','#588BFF','#F1546B','#3527C4','#7297F2','#94CEFD','#FF6838','#00CA92','#EBB7FF','#AECD70','#AD5794'],
               timerID:null,
           }
       },
       computed: {
           chartId(){
               let fontString = 'abcdefghigklmnopqrstuvwxyz';
               return this.id + 
fontString.substring(this.rnd(0,fontString.length-1)); //获取随机id
           },
           myChart(){
               return echarts.init(document.getElementById(this.chartId))
           },
           legend(){
               if(this.chartOption.legend && this.chartOption.legend.length>0){
                   return this.chartOption.legend;
               }else{
                   let legendArr = [];
                   if(this.chartOption && this.chartOption.series){
                       
if(Object.prototype.toString.call(this.chartOption.series) === '[object 
Object]'){ // Object
                           
if(this.chartOption.series.name)legendArr.push(this.chartOption.series.name);
                       }else 
if(Object.prototype.toString.call(this.chartOption.series) === '[object Array]' 
&& this.chartOption.series.length > 0){ // Array
                           for(let item of this.chartOption.series){
                               if(item.name)legendArr.push(item.name);
                           }
                       }
                   }
                   return Array.from(new Set([...legendArr]));
               }
           },
           colorOption(){
               if(this.chartOption && this.chartOption.color){
                   return Array.from(new 
Set([...this.chartOption.color,...this.colorList]));
               }else{
                   return this.colorList;
               }
           }
       },
       props: {
           id: {
               type: String,
               require: true,
               default: ''
           },
           chartOption: {
               type: Object,
               require: false,
               default: ()=>{
                   return {}
               }
           }
       },
       watch:{
           chartOption:{
               handler(newVal, val){
                   this.$nextTick(()=>{
                       if(this.myChart){
                           this.myChart.setOption(newVal);
                       }else{
                           this.myChart.setOption(val);
                       }
                   })
               },
               immediate: true,
               deep: true
           }
       },
       mounted(){
           this.$nextTick(()=>{
               this.drawBar();
               this.timerID=setTimeout(()=>{
                   this.resizeCanvas();
               },0)
           })
       },
       methods: {
           drawBar(){
               let basicOption = {
                   title: {
                       text: '',
                   },
                   color: this.colorOption,
                   tooltip : {
                       trigger: 'axis',
                       axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                           type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
                       }
                   },
                   grid: {
                       left: '3%',
                       right: '4%',
                       bottom: '6%',
                       containLabel: true
                   },
                   legend: {
                       data:this.legend,
                       // bottom: 0,
                       // left: 'center'
                   },
                   textStyle: {
                       fontFamily: 'Microsoft YaHei'
                   },
                   barMaxWidth: 30,
                   barMinHeight: 1,
                   xAxis : [],
                   yAxis : [],
                   series : []
               }
               
this.myChart.setOption(mergeObject(basicOption,this.chartOption));
           },
           resizeCanvas(){
               this.myChart.resize();
           },
           // 随机数
           rnd(n, m){
               let random = Math.floor(Math.random()*(m-n+1)+n);
               return random;
           }
       },
       activated (){
           this.resizeCanvas();
           // window.addEventListener('resize',this.resizeCanvas());
       },
       deactivated(){
           window.removeEventListener('resize',this.resizeCanvas);
       },
       beforeDestroy(){
           clearTimeout(this.timerID)
           this.myChart.dispose();
       }
   }
   </script>
   这么个组件重复创建发生了内存溢出 

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org