echarts 折柱混合图,渐变切图例和x轴滚动可自动切换,并且自定义图例,一般使用在大屏项目上,效果如图
getSZCharts(val){this.mySZFXChart=this.$echarts.init(document.getElementById("isSZCharts"));let bardata1=[6,6,5,3,8];let bardata2=[8,8,8,6,7];let lineData=[9,9,9,9,9,9,9,9,9];let categoryData=getDateArrayFromMonthStart();// 计算 dataZoom 的窗口大小（显示多少个数据点）constzoomWindowSize=12;// 同时显示12个数据点，可根据需要调整consttotalPoints=categoryData.length;constendPercent=(zoomWindowSize/totalPoints)*100;let option={grid:{top:"18%",left:"5%",right:"3%",bottom:"23%",},legend:{itemWidth:20,itemHeight:20,itemGap:33,left:"center",top:"4%",padding:0,textStyle:{color:"#fff",fontSize:30,padding:[8,0,0,6],fontFamily:"Source Han Sans CN",},data:[{name:"进水水质",icon:"rect",itemStyle:{color:"#1097ff",borderWidth:0},},{name:"出水水质",icon:"rect",itemStyle:{color:"#00ffff",borderWidth:0},},{name:"出水标准",icon:"path://M0,0 L20,0 L20,4 L0,4 Z",// 20x4 的矩形路径itemStyle:{color:"#FFBE32",borderWidth:0,},},],},tooltip:{trigger:"axis",backgroundColor:"transparent",textStyle:{color:"#A0B9C3",fontSize:14,fontWeight:"bold",fontFamily:"PingFangSC, PingFang SC",},formatter:function(params){let filtered=params;constseen=newMap();filtered=filtered.filter((item)=>{if(seen.has(item.seriesName))returnfalse;seen.set(item.seriesName,true);returntrue;});if(!filtered.length)return"";let result="";filtered.forEach((item)=>{result+=`<div style="display:flex; justify-content:space-between; gap:20px;font-size:22px;margin-bottom:14px;"><span>${item.name}:${item.seriesName}</span><span style="font-weight:bold;">${item.value}</span></div>`;});returnresult;},},xAxis:{type:"category",axisLabel:{textStyle:{color:"#fff",fontSize:28,fontFamily:"Source Han Sans CN",},formatter:function(data){returndata;},},axisTick:{show:false,},splitLine:{show:false,},axisLine:{lineStyle:{color:"#216CA0",},show:true,},data:categoryData,interval:categoryData.length>12?1:categoryData.length>20?3:0,},yAxis:{name:"mg/L",nameTextStyle:{color:"#D1DEEE",fontSize:24,padding:[0,8,12,0],fontFamily:"Source Han Sans CN",},splitLine:{show:true,lineStyle:{color:"rgba(33, 108, 160, 0.4)",type:"dashed",},},axisLine:{show:false,},axisLabel:{show:true,textStyle:{color:"#D1DEEE",},fontSize:24,fontFamily:"Source Han Sans CN",formatter:function(value){if(value===0){returnvalue;}returnvalue;},},axisTick:{show:false,},},dataZoom:[{type:"slider",show:true,height:10,xAxisIndex:[0],bottom:"8%",start:0,end:endPercent,// 动态设置窗口大小handleIcon:"path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",handleSize:"110%",handleStyle:{color:"#d3dee5",},textStyle:{color:"#fff",},borderColor:"#90979c",},{type:"inside",show:true,height:15,start:0,end:endPercent,},],series:[{name:"出水水质",data:bardata2,type:"bar",barCategoryGap:"20%",barWidth:"16px",barGap:0.5,itemStyle:{color:{x:0,y:1,x2:0,y2:0,type:"linear",colorStops:[{offset:0,color:"rgba(16, 151, 255,1)",},{offset:1,color:"rgba(16, 151, 255,0)",},],},borderWidth:1,borderColor:"#1097ff",},},{name:"进水水质",data:bardata1,type:"bar",barCategoryGap:"20%",barWidth:"16px",barGap:0.5,itemStyle:{color:{x:0,y:1,x2:0,y2:0,type:"linear",colorStops:[{offset:0,color:"rgba(0, 251, 252,1)",},{offset:1,color:"rgba(0, 251, 252,0)",},],},borderWidth:1,borderColor:"#00FFFF",},},{name:"出水标准",type:"line",symbol:"none",lineStyle:{normal:{width:1,},},itemStyle:{normal:{color:"#FFBE32",},},smooth:true,data:lineData,},],};// 先设置图表this.mySZFXChart.setOption(option,true);// 自动轮播 + dataZoom 自动移动let len=0;let intervalId=setInterval(()=>{if(len>=categoryData.length){len=0;// 重置 dataZoom 到起始位置this.mySZFXChart.dispatchAction({type:"dataZoom",dataZoomIndex:0,start:0,end:endPercent,});}// 显示 tooltipthis.mySZFXChart.dispatchAction({type:"showTip",seriesIndex:0,dataIndex:len,});// 移动 dataZoom 使当前显示的点居中constcurrentIndex=len;conststartPercent=Math.max(0,Math.min(100-endPercent,((currentIndex-zoomWindowSize/2)/totalPoints)*100));this.mySZFXChart.dispatchAction({type:"dataZoom",dataZoomIndex:0,start:startPercent,end:startPercent+endPercent,});len++;},6000);// 保存定时器ID，以便在组件销毁时清除this.autoPlayInterval=intervalId;}一定要清除定时器
beforeDestroy(){if(this.autoPlayInterval){clearInterval(this.autoPlayInterval);}},
