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