ZM—板块跳转效果方法

小鱼有毒

于 2021-02-05 16:11:19 发布

阅读量124

点赞数

分类专栏： ZM

本文链接：https://blog.csdn.net/wangyu0513/article/details/113697881

版权

ZM 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

该博客介绍了如何实现一个首页板块组件，该组件能够根据用户的点击或自动切换展示不同的内容，如煤炭、煤化工等行业的数据图表。当点击特定板块时，会显示相应的详细图表，并停止自动切换；否则，组件会每5秒自动跳转到下一个板块。内容涉及到Vue.js的组件状态管理和数据渲染，以及图表绘制的逻辑处理。

摘要由CSDN通过智能技术生成

首页板块

组件名称：dv-bankuai

效果图：
点击煤炭、煤化工等，组件下半部分显示不同页面，不点击时，隔5秒自动跳转下一个板块

具体方法

html代码太多就不放上来了

data() {
    return {
      cur: 1,//控制哪个组件显示
      timer:null,
    };
  },
mounted() {
      this.timer=setInterval(this.loop, 5000);//自动切换板块
  },
methods: {
	loop(){
      if(this.cur){
        this.cur++	//通过改变cur来控制显示的是哪一个板块
        this.ll(this.cur)
         if(this.cur==6){
         this.cur=1
         this.ll(this.cur)
        }
      }
    },
    ll(num){
   		switch (num)
      		{//总共六个就列举了一个 这个方法是用来画对应板块中间的饼图
       		 case 1:
          	 this.chartsData=this.allData.chartsDataCoal;
             this.drawChartsCoal('年度生产计划',this.allData.chartsDataCoal.yearPlan,'万吨',this.allData.chartsDataCoal.executePlan,
             this.allData.chartsDataCoal.finish);
             break;
             }
		},
	tabClick(num) {//点击煤炭等触发的方法
      this.cur = num;//显示对应板块
      this.ll(this.cur)
      clearInterval(this.timer)//清除定时器
    },
  }