echarts实现多条折线图轮播、tooltip提示工具轮播

在这里插入图片描述
一、html代码
在这里插入图片描述
二、js代码
①option配置,只关注legend和series

 legend: {
        x : 'center',
        borderWidth : '0',
        data:['温度','湿度','氨气','硫化氢'],
        selectedMode: 'single',
        selected:{
          '温度':true,
          '湿度':false,
          '氨气':false,
          '硫化氢':false
        },                                 //由于需要自适应,此值用变量动态改变
        right: 10,
        inactiveColor: "#ADD9FF",         //没中状态的颜色

        textStyle:{
            fontSize:18,
        },
    },

series我配置了4条直线;这里不展开,自定义即可。

②轮播代码

myChart.setOption(option);

//===============================实现echarts多条折线轮播、tooltip提示框轮播==============================
// 加载完页面,开启所有轮播定时器
window.onload = function(){ 
	clearInterval(tooltipInterval); // 清理提示框轮播定时器 
    clearInterval(lineInterval);   // 清理折线轮播定时器
	changeLine();    // 开启折线轮播定时器
	faultByHourTime();  // 开启提示框轮播定时器
}

// 折线轮播、
var lineInterval;
var changeLine = function(){
    lineInterval = setInterval(
		function(){
		    for(var i = 0;i<option.legend.data.length;i++){
			 	var opt = option.legend.data[i]
			 	 // console.log(opt)  //name
			     // console.log(option.legend.selected[opt])  //状态
			    if(option.legend.selected[opt]===true){

			     	// console.log(option.legend.selected[opt])  // false

			     	if(i == (option.legend.data.length-1)){
			     		// console.log((option.legend.data.length-1))
			     		option.legend.selected[opt]=false
			     		i=0;
			     		var newOpt = option.legend.data[i]
			     		option.legend.selected[newOpt] = true

			     	}else{
			     		option.legend.selected[opt]=false
			     		i++;
			     		var nextOpt = option.legend.data[i]
			     	    option.legend.selected[nextOpt]=true

			            console.log(nextOpt)  //状态
			            console.log(option.legend.selected[nextOpt])  //状态
			     	}
			    }else{

			    }
		    }
		    myChart.setOption(option);
		    console.log(option.legend.selected)
            // clearInterval(lineInterval);
		},6000
	)
}

// 提示框轮播
var tooltipInterval;
var faultByHourIndex = 0; //播放所在下标
var faultByHourTime = function(){
	tooltipInterval = setInterval(function() { //使得tootip每隔三秒自动显示
	    myChart.dispatchAction({
	        type: 'showTip', // 根据 tooltip 的配置项显示提示框。
	        seriesIndex: 0,
	        dataIndex: faultByHourIndex
	    });
	    faultByHourIndex = faultByHourIndex + 360;  //设置步长
	    // faultRateOption.series[0].data.length 是横坐标数据的长度
	    if (faultByHourIndex >= option.series[0].data.length/12) {  // 数据长度除以12来控制提示框轮播长度
	        faultByHourIndex = 0;
	    }
	    if (faultByHourIndex >= option.series[1].data.length/12) {
	        faultByHourIndex = 0;
	    }
	    if (faultByHourIndex >= option.series[2].data.length/12) {
	        faultByHourIndex = 0;
	    }
	    if (faultByHourIndex >= option.series[3].data.length/12) {
	        faultByHourIndex = 0;
	    }
	}, 1000);
}
document.getElementById('main').onmouseover = function(){
     clearInterval(tooltipInterval);
     clearInterval(lineInterval);

}
document.getElementById('main').onmouseout = function(){
	 // clearTimeout(faultByHourTime);
     faultByHourTime();
     changeLine();
}
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读