记一次Vue中使用Echats的Bug【自动吸附以及部分样式失效问题】

Echarts版本

• echarts-5.3.3

问题描述

在写访问量统计图的时候横坐标轴为时间轴，纵坐标为访问次数，想实现以分钟为间隔的统计，并且鼠标移动时自动吸附到数据点，并显示浮窗数据，但是写完后发现浮窗没有出现，并且自动吸附失效，如下图

问题原因&解决方法

出现这个原因是因为我将echart的实例放到了data(){return{}}里面，使用this的方式调用引起的

有问题的代码

//上方代码省略
data() {
    
    
    return {
    
    
      todayChart: null
    };
 },
 //下方部分代码省略
 methods:{
    
    
 	showTodayChart(){
    
    
		this.todayChart = echarts.init(this.$refs.today);
		//...省略设置代码
		this.todayChart.setOption(option);
	}
 }

正确做法

正确的方式为将todayChart也就是echarts定义为局部的变量即可

data() {
    
    
    return {
    
    
      //去掉todayChart，使用方法内局部变量定义
    };
 },
 //下方部分代码省略
 methods:{
    
    
 	showTodayChart(){
    
    
		let todayChart = echarts.init(this.$refs.today);
		//...省略设置代码
		todayChart.setOption(option);
	}
 }

最终效果