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

[GitBox]

littleflyfly0610 edited a comment on issue #11776: 使用echarts内存溢出的问题
URL: 
https://github.com/apache/incubator-echarts/issues/11776#issuecomment-561461558
 
 
   <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: ''
           },
           /**
            * 自定义配置项，会覆盖默认配置
            * 配置内容同echarts官方配置项
            * label标签默认从传入的dataY中得name中取值，如需更改或清空，可在此配置
            * eg:  legend:{
                       data: []
                   }
            */
           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(b
   ```asicOption,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>
   大致这么个组件虽然每次都dispose了但是还是会内存溢出如果重复创建````

----------------------------------------------------------------
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