用echart的tooltip属性解释箭头函数this指向问题

最新推荐文章于 2023-04-07 10:00:24 发布

北冥有锅

最新推荐文章于 2023-04-07 10:00:24 发布

阅读量743

点赞数

本文链接：https://blog.csdn.net/qq_43371287/article/details/105865094

版权

formatter:(params)=>{
//this指向vue，this.lineDateData为vue的data中的值

}
formatter:function(params)=>{
//this指向tooltip，this.lineDateData为underfined
}
具体可以点击查看ES6中箭头函数VS普通函数的this指向（若侵联系删）

tooltip: {
          trigger: 'axis',
              formatter:(params)=> {
                let date = '';
                let result = '';
                for (let i = 0, l = params.length; i < l; i++) {
                  if(this.lineDateData.length){
                    this.lineDateData.forEach((tt,ii)=>{
                      if(params[i].dataIndex==ii){
                        date = params[i].axisValue + '('+ tt +')'
                        result += date+'<br/>' + params[i].seriesName + ' : ' + params[i].data ;
                      }
                    })
                  }else{
                    date = params[i].axisValue
                    result += date+'<br/>' + params[i].seriesName + ' : ' + params[i].data ;
                  }
                };
                return result;
              }
            },

let option = {
            legend: {
              data:this.legend
            },
            tooltip: {
              trigger: 'axis',
              formatter:(params)=> {
                let date = '';
                let result = '';
                for (let i = 0, l = params.length; i < l; i++) {
                  if(this.lineDateData.length){
                    this.lineDateData.forEach((tt,ii)=>{
                      if(params[i].dataIndex==ii){
                        date = params[i].axisValue + '('+ tt +')'
                        result += date+'<br/>' + params[i].seriesName + ' : ' + params[i].data ;
                      }
                    })
                  }else{
                    date = params[i].axisValue
                    result += date+'<br/>' + params[i].seriesName + ' : ' + params[i].data ;
                  }
                };
                return result;
              }
            },
            color:['#60acfc','#ff7c7c','#32d3eb','#feb64d','#5bc49f','#9287e7','#FFEE58','#f44336','#E91E63','#CDDC39'],
            grid: {
                left: '1%',
                top:'10%',
                right: '3%',
                bottom: '4%',
                containLabel: true
            },
            xAxis :
            {
              type : 'category',
              data: this.lineXAxisData,
            },
            yAxis: {
              axisLine:{
                show:false
              },
              axisTick:{
                show:false
              },
              type: 'value',
              splitLine: {
                  show: true,
                  lineStyle:{
                      type:'dashed'
                  }
              }
            },
            series:this.series
        };