echarts 加载动画、增量动画、动画配置项

快来打我* 2021-07-24 20:38 1292阅读 0赞

1、加载动画
    	echarts.init对象.showLoading('default',{配置}); 开始动画
    	echarts.init对象.hideLoading(); 	结束动画
    	
    	配置参数:
    	{
    	  text: 'loading',
    	  color: '#c23531',
    	  textColor: '#000',
    	  maskColor: 'rgba(255, 255, 255, 0.8)',
    	  zlevel: 0,
    	
    	  字体大小。从 `v4.8.0` 开始支持。
    	  fontSize: 12,
    	  是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
    	  showSpinner: true,
    	  旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。
    	  spinnerRadius: 10,
    	  旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。
    	  lineWidth: 5
    	}
    	
    2、增量动画(修改数据时动态变化)
    
    	(1)每次修改数据都需要重新设置option然后调用echarts.init对象.setOption(option)
    	
    	(2)新的option会对旧option进行整合
    		即只需要重新设置修改了的部分即可,如修改了系列的data,只需重新设置
    		option={series:[{
    			data:newData	
    		}]};
    		
    		myMap.setOption(option);
    
    3、动画配置项
    	animation:true,    设置是否开启动画
    	animationDuration:n,  动画时长
    	animationDuration:function(e)
    	{
    		e中包含能够产生动画的各个类型,每种类型从0开始
    			如下图:包含平均线、最大小值和柱三种类型
    			每种类型中的元素都从id为0开始
    				
    		动画的设置产生:类型的id值*返回的毫秒
    		return 毫秒;
    	}，
    	animationEasing:'linear',  动画类型bounceOut等
    	animationThreshold:n, 	当单个系列显示的图形数量大于这个阈值时会关闭动画。

动画参数效果图:  
![在这里插入图片描述][20201018195508715.png_pic_center]

代码示例:  
增量动画:

export default { 
      name: 'App',
      data()
      { 
        return{ 
          myMap:'',
          pieData:[{ name:'淘宝',value:'11231'},{ name:'京东',value:'22673'},{ name:'唯品会',value:'6123'},{ name:'1号店',value:'8989'},{ name:'聚美优品',value:'6700'}]
        }
      },
      methods:{ 
      	//增加
        add()
        { 
          this.pieData.push({ name:'苏宁',value:'9999'})
          var option={ 
            series:[
              { 
                data:this.pieData
              }
            ]
          }
          this.myMap.setOption(option);
    
        }
      },
      mounted:async function(){ 
    
    
        var myMap=echarts.init(document.querySelector('.map'));
        this.myMap=myMap;
        
    
        var option = { 
          series:[
            { 
              type:'pie',
              data:this.pieData,
    
              
            }
          ],
    
    
        };
    
        myMap.setOption(option);
    
    
        window.onresize=()=>{ 
          myMap.resize();
          myMap.setOption(option);
        }
    
      }
    }

[20201018195508715.png_pic_center]: /images/20210724/99b085d44d0d4d6eb9a588b78a25a053.png