首页 前端知识 echarts柱状图固定展示n个,超过n个出现换页按钮。点击展示剩下的

echarts柱状图固定展示n个,超过n个出现换页按钮。点击展示剩下的

2024-03-12 01:03:38 前端知识 前端哥 173 496 我要收藏

1.echart官方用法我没找到,自己写了一个,如果大家知道的话,麻烦评论一下或者私我哈,学习学习~٩(๑❛ᴗ❛๑)۶~

2.先说一下整体思路哈:

  • 左右两边的换页符号是ui小姐姐切的图片,先固定放在柱形图两边。
  • 然后给图片绑定样式让他默认隐藏,在进入这个页面(出现柱形图的页面)的时候,判断获取的你要展示的柱形图列表的长度。
  • 如果超过了13(我这里用的是13)个,就让柱形图列表等于前13个数据,同时出现换页符号(原来是默认隐藏),然后给换页符号加上点击事件,获取13个之后的数据(剩余的数据),就相当于展示在下一页

3.具体代码分析

先写好换页符号的样式,默认隐藏

<img
src=".......图片地址"
alt=""
@click="handleClickright()"
:class="[{showleft : disabled},'positionimgright']"
/>

<img
src=".......图片地址"
alt=""
@click="handleClickleft()"
:class="[{showright: disabled},'positionimgleft']"
/>

先不要看点击事件哈,这个后面才用到,先看  :class的绑定 {showleft:disabled}是控制显示隐藏的,positionimgleft是基本样式

样式代码,先确定图片的位置样式,再默认图片不显示

. gxgaswitch {
   position: relative;//这个是外面定位的样式,不用管这个

. positionimgleft {
   //定位左边图片的样式
   display: none ;
   position: absolute ;
   left: 12px;
   top: 76px;
   z-index: 999;
}
. positionimgright {
    //定位右边图片的样式
    display: none;
    position: absolute ;
    left: 368px;
    top: 76px;
    z- index: 999;

&: hover {
//图片默认不展示

. positionimgright {display: block;}

. positionimgleft {display: block;}


. showright {

    display: none !important;
             }

. showleft {
     
    display: none !important;
             }
  }

然后是判断数据列表的长度,来确定是否展示切换页面的按钮

initBar() {

ryfblist({我需要传进接口里面的参数}) .then((res) => i

this.costcount =res . data. list ;//拿出来需要的接口数据列表,costcount 别忘了定义

//这两步可以忽略,是把数据在加工了一下,柱形图x轴名称显示的有点长,决定把工厂去掉,只要前面的名称

this.xData = Array.from(this . costcount, ({列表里面的某一个变量名}) => 列表里面的某一个变量名) 
.map((str) => {
   return str . replace( "工厂", "");
}
);

//这个也是可以忽略的,只是加工取出来了数据  
this.yData=Array.from(this.constcount,({列表里面的某一个变量名})=列表里面的某一个变量名);



//this.xData是把this.costcount的数据加工后的结果,所以用的是this. xdata
//这个13是我随便定的,可以根据自己需求来
if (this.xData.length<= 13) {
  //这俩TRUE代表是:class里面的showleft ,showright生效,showleft在样式里面是none,也就是小于13不显示图片
   this.disabled = true ;
   this.disnone = true;
   this.newArray = this . xData;
   this.newYarr = this . yData;
}
else if{
  this.disabled =false;//给一个FALSE代表要显示样式,就会出现图片按钮

  this.disnone =true;
  this.newArray =this.xData.slice(0, 13)//如果超过了13个,也是只展示13个,剩下的到下一页展示
  this.newYarr =this.yData.slie(0, 13)
}

 

 判断列表数据长度,超出显示右侧图片按钮,然后就可以用点击事件,重新取数据渲染数据

//向右重新泣染柱形图
点击事件获取
handleClickright(){
//相当于点击按钮之后,右边按钮消失,左边按钮出现

this.disabled =true;

this.disnone =felse;

//slice(n),只有一个参数n时,就是从这个下标值n一直取到结尾。
//取第二页展示的柱形图参数,是13之后的。

this.newArray=this. xData.slice(13);
this.newYarr = this yData.slice(13);

//这里写柱形图的内容,把this.newArray this.newYarr 取好的值重新赋给x轴,y轴
this.dangfeiBar.usetoption({
   
   //比如
   //xAxis:{
   //type: "category"
   // data:this newArray,}
})

}

这个时候右边按钮隐藏,左边按钮出现,点击后重新回到前一页,也就是重新渲染了前13个数据

handleclickleft() {

this.disnone =true;

if (this.XData.length <=13){

this newArray =this.xData;

this.newYarnnthis.yData

}else{

this.disabled=false;
thisnewArray=this.xData.slice(0, 13);
this.newYarrthis.yData.slice(0, 13);

}
}

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3674.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!