数据如下：
lineColor: [ '#5ED7D9', '#FBE451','#ff6200','#1B9EFA'],lineX: ['03.24', '03.25', '03.26', '03.27', '03.28', '03.29', '03.30'],lineData: [{name: '叶绿素a', value: [17, 25, 14, 21, 36, 58, 45]},{name: '总磷', value: [26, 13, 33, 11, 15, 26, 19]},{name: '总氮', value: [20, 37, 6, 29, 33, 36, 28]},{name: '氨氮', value: [20, 37, 6, 29, 33, 36, 28]},{name: '高锰酸盐', value: [20, 37, 6, 29, 33, 36, 28]},{name: '化学需氧量', value: [20, 37, 6, 29, 33, 36, 28]},],intervalId:null,showIndex:0,div部分：
<div id="line" @click="lineDetail"></div>js（折线图方法）：
动态传递渲染的数据项、dom（后期有个全部展示的，不需要的可以去掉）
lineInit(i,dom) {let lineDomlet lineChartif (dom){lineDom = document.getElementById(dom)}else {lineDom = document.getElementById("line")}if(echarts.getInstanceByDom(lineDom)){echarts.dispose(lineDom)}lineChart = echarts.init(lineDom)const legendData = []const series = []let lineData = this.lineData// for (let i = 0; i < lineData.length; i++) {legendData.push(lineData[i].name)series.push({name: lineData[i].name,data: lineData[i].value,type: 'line',smooth: true,lineStyle: {color: this.lineColor[i%3]},areaStyle: {show: true,color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: this.lineColor[i%3] + '80' // 0% 处的颜色}, {offset: 1, color: this.lineColor[i%3] + '10' // 100% 处的颜色}],}},markLine: {symbol: ['none', 'none'], // 去掉箭头label: {// show: false,position: 'end',formatter: "{c}",textStyle: {color: "#ffffff" //设置文字颜色},},data: [{name: '阈值',yAxis: this.markData[i] ||1}],lineStyle: {type:'dashed',color: '#FF1D00',width: 2},tooltip: {show: true,formatter: "{b}+':'+{c}"}}})// }const lineOptions = {backgroundColor: 'transparent',color: this.lineColor[i%3],tooltip: {trigger: 'axis',backgroundColor: "rgba(10,10,10,0.5)", //设置背景图片 rgba格式color: "black",borderWidth: "1", //边框宽度设置1borderColor: "#67E0E3", //设置边框颜色textStyle: {color: "#ffffff" //设置文字颜色},},legend: {top: '9%',icon: 'roundRect',itemWidth: 20,itemHeight: 8,textStyle: {color: "#ffffffcc", //设置文字颜色fontSize: 16},// data:legendData},dataZoom: [{type: 'inside',realtime: true,start: 0,end: 100}],grid: {left: '10%',bottom: '15%',width: '80%',height: "70%",top: '20%'},xAxis: {data: this.lineX,boundaryGap: false,axisLabel: {color: 'rgba(255,255,255,0.8)',fontSize: 12,fontWeight: 400,},nameTextStyle: {color: '#67E0E3',fontSize: 12},},yAxis: {type: 'value',splitNumber: 4,axisLabel: {color: 'rgba(255,255,255,0.8)',fontSize: 12,fontWeight: 400,},axisLine: {show: true},splitLine: {show: false},axisTick: {show: true}},series: series}lineChart && lineChart.setOption(lineOptions)},
js定时器部分代码：
let line = document.getElementById('line')let _this = thisif (_this.intervalId){clearInterval(_this.intervalId)}_this.intervalId = setInterval(()=>{_this.showIndex++_this.lineInit(_this.showIndex % _this.lineData.length)},5000)line.addEventListener('mouseenter',function (){clearInterval(_this.intervalId)})line.addEventListener('mouseleave',function (){_this.intervalId = setInterval(()=>{_this.showIndex++_this.lineInit(_this.showIndex % _this.lineData.length)},5000)})
效果图（自动切换）：
