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

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);

}
}