echarts应用

最新推荐文章于 2022-12-03 16:49:29 发布
magicfly9527
最新推荐文章于 2022-12-03 16:49:29 发布
阅读量742
点赞数
分类专栏： js 文章标签： javascript echarts WEB图表
本文链接：https://blog.csdn.net/magicfly9527/article/details/51277091
版权
js 专栏收录该内容
28 篇文章 0 订阅
订阅专栏
ECHARTS2 可以兼容IE7 ， 3兼容IE8以上，所以选择了2
代码，主要作一个网络丢包率的表
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="renderer" content="webkit">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
 	<meta http-equiv="Window-target" content="_top">
 	<meta http-equiv="Content-Language" content="zh-CN" />
 	<meta name="author" content="393463188@qq.com" />
	<title>虎牙丢包率</title>
	<script src="http://a.dwstatic.com/huya/main/lib/jq_ud_mod_4de7709.js"></script>
	<script src="js/echarts-all.js"></script>
	<style>
		body,p,h1,h2{
			padding: 0;
			margin: 0;
		}
		h1,h2{
			font-weight: normal;
			font-size: 100%;
		}
		.chart{
			width: 550px;
			font-size: 12px;
			font-family: "simsum",arial;
			color: #999;
			background:#333;

		}
		.chart .hd{
			position: relative;
			padding-left: 16px;
			font-size: 14px;
			line-height: 50px;
			height: 50px;
			background: #191919;
			color: #ccc;
		}
		.chart .close{
			position: absolute;
			right: 15px;
			top: 0px;
			color: #474747;
			font-size: 40px;
		}
		.chart .bd{
			padding-top: 22px;

		}
		.link{
			text-indent: 16px;
		}
		.link a{
			color: #0099ff;
			text-decoration: none;
		}
		.text{
			padding-left: 24px;
			line-height: 26px;
			padding-bottom: 19px;
			border-bottom: 1px solid #444;
		}
		.btns{
			position: relative;
			padding-top: 12px;
			height: 48px;
		}
		.btn{
			position: absolute;
			right: 60px;
			display: block;
			width: 100px;
			height: 35px;
			line-height: 35px;
			text-align: center;
			color: #fff;
			border-radius: 4px;
			background: #6f88a9;
			cursor: pointer;
		}
		.btn:hover{
			text-decoration: none;
			color: #fff;
		}

		#main{
			height: 380px;
			color: #fff;
		}
		.mark{
			color: #ff8a00;
		}
		.tip {
			padding-top: 150px;
			text-align: center;
			font-size: 18px;
			color: #ccc;
		}
	</style>
</head>
<body>

<div class="chart">
	<!-- <div class="hd">
		<h2 class="title">网络丢包率</h2>
		<i class ="close">×</i>
	</div> -->
	<div class="bd">
		<div id="main"></div>
	</div>
	<div class="ft">
		<div class="text">
			<p>1. 当丢包率幅度在<span class="mark">10%</span>以下，观众观看基本不受影响。</p>
			<p>2. 当丢包率幅度在<span class="mark">10%-20%</span>，此时观众观看会有卡顿，建议您调低码率后开播。</p>
			<p>3. 当丢包率幅度在<span class="mark">20%</span>以上，建议您关闭直播，咨询网络运营商进行调整，重新开播。</p>
		    <p class="link"><a href="http://help.huya.com/311" target="_blank">点击了解网络丢包解决办法</a></p>
		</div>
		<!-- <div class="btns">
			<a class="ok btn">确定</a>
		</div> -->
	</div>
</div>
<script>
	 var myChart = echarts.init(document.getElementById('main'));
	 var time = 3*60*1000;
	 var pid = getUrlParams('pid');
	 getData();
	 function getData(){
	 	$.ajax({
	 		url: 'http://test.q.huya.com/yy/index.php',
	 		data: {
	 			'm':'PacketloseRate',
	 			'do':'ajaxGetPacketLoseRate',
	 			'pid':pid
	 		},
	 		dataType: 'jsonp',
	 		jsonp: 'jsonp'
	 	}).done(function(data){
	 		if(data.status == 200 && data.data){
	 			if(!$.isEmptyObject(data.data.max)){
	 				Draw(data.data);
	 			}else{
	 				$('#main').html('<p class="tip">暂时没有数据，请稍后再来</p>');
	 			}
	 		}else{
	 			$('#main').html('<p class="tip">'+data.msg+'，请稍后再来</p>');
	 		}
	 	})
	 	setTimeout(getData,time)
	 }

	 function Draw(data){
	 	var max = data.max;
	 	var points = data.points;
	 	var obj = {};
	 	for(var i in max){
	 		obj[i] = max[i];
	 	}
	 	for(var j in points){
	 		obj[j] = points[j];
	 	}
	 	var times = [];
	 	var val = [];
	 	for(var i in obj){
	 		times.push(i);
	 	};
	 	times.sort(function(a,b){
	 		return a - b
	 	})
	 	for(var i = 0; i<times.length; i++){
	 		val.push(Number(obj[times[i]]*100).toFixed(2));
	 	}
	     var option = {
			    title : {
			    	x : 'center',
			        text: '网络上行丢包率曲线图',
			        textAlign: 'center',
			        textStyle:{
			        	color: '#ccc',
			        	fontSize: 14
			        }
			    },
			    tooltip : {
			        trigger: 'axis', // 移上去显示的点
			        formatter: function(obj){
			        	//console.log(obj);
			        	var data = obj[0];
			        	return data.seriesName+': '+ data.value + '%</br>时间: '+ formatTime(data.name);
			        }
			    },
			    calculable : true,
			    xAxis : [
			        {	axisLabel:{
				        	textStyle:{
	                            color:"#999", // 文本色
	                            fontSize: 12 // 最小12
	                        },
			                formatter: function(val){ 
			                	return formatTime(val);
			                }
	                    },
			            type : 'category',
			            boundaryGap : false,
			            data : times,
			            splitLine: {
			            	color: '#f00'
			            },
			            axisLine:{
			            	show:false // 不显示X轴
			            }
			        }
			    ],
			    yAxis : [
			        {
			        	axisLabel:{
				        	textStyle:{
	                            color:"#999"
	                        },
	                        formatter: '{value}%'
	                    },
			            type : 'value',
			            axisLine:{
			            	show:false
			            }
			        }
			    ],
			    grid:{
			    	x : 55,
			    	y : 35,
			    	width: 450, //栅格总宽度
			    	height: 305, // 栅格总高度
			    	backgroundColor : "#2f2f2f"//网格色
			    },
			    series : [
			        {
			            name:'丢包率',
			            type:'line',
			            data:val,
                        markLine: {
                        	data : [
                        	    {type : 'max', name: '最大掉包率'}
                        	]
                        },
			            itemStyle:{
			            	normal:{ // 通用型，折线配置
			            		color:'#0099ff', // 圆点设置
			            		lineStyle:{
			            			color: '#0099ff'　//线颜色
			            		}
			            	}
			            }
			        }
			    ]
			};
	        myChart.setOption(option);
	 }

  	function getUrlParams (key) {  
        var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)", "i");  
        var r = window.location.search.substr(1).match(reg);  
        if (r != null) return decodeURIComponent(r[2]);  
        return null;  
	}  
 	 //补0
 	 function addZero(num){
 	 	if(num>=10){
 	 		return num+'';
 	 	}else{
 	 		return '0'+num
 	 	}
 	 }
 	 //将时间转成 00:20:00 格式
 	function formatTime(val){
 	 	var date = new Date(Number(val*1000)); //val是秒为单位，所以要转成毫秒 val * 1000  
     	var time = addZero(date.getHours()) + ':' + addZero(date.getMinutes()) + ':'+ addZero(date.getSeconds());
     	return time;
	}
</script>
</body>
</html>