echarts 折柱混合图,渐变切图例和x轴滚动可自动切换,并且自定义图例,一般使用在大屏项目上,效果如图getSZCharts(val){this.mySZFXChartthis.$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 categoryDatagetDateArrayFromMonthStart();// 计算 dataZoom 的窗口大小显示多少个数据点constzoomWindowSize12;// 同时显示12个数据点可根据需要调整consttotalPointscategoryData.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 filteredparams;constseennewMap();filteredfiltered.filter((item){if(seen.has(item.seriesName))returnfalse;seen.set(item.seriesName,true);returntrue;});if(!filtered.length)return;let result;filtered.forEach((item){resultdiv styledisplay:flex; justify-content:space-between; gap:20px;font-size:22px;margin-bottom:14px;span${item.name}:${item.seriesName}/spanspan stylefont-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.length12?1:categoryData.length20?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(value0){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 len0;let intervalIdsetInterval((){if(lencategoryData.length){len0;// 重置 dataZoom 到起始位置this.mySZFXChart.dispatchAction({type:dataZoom,dataZoomIndex:0,start:0,end:endPercent,});}// 显示 tooltipthis.mySZFXChart.dispatchAction({type:showTip,seriesIndex:0,dataIndex:len,});// 移动 dataZoom 使当前显示的点居中constcurrentIndexlen;conststartPercentMath.max(0,Math.min(100-endPercent,((currentIndex-zoomWindowSize/2)/totalPoints)*100));this.mySZFXChart.dispatchAction({type:dataZoom,dataZoomIndex:0,start:startPercent,end:startPercentendPercent,});len;},6000);// 保存定时器ID以便在组件销毁时清除this.autoPlayIntervalintervalId;}一定要清除定时器beforeDestroy(){if(this.autoPlayInterval){clearInterval(this.autoPlayInterval);}},