溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
第一次接觸eCharts，學習中。
實現(xiàn)功能：1、進入展示折線圖（line）,可轉換為柱狀和存圖；
2、折線圖上提示上加超鏈接功能；
3、整個圖像可以隨窗口大小改變而改變；
4、兼容到至少IE7；
<script type="text/javascript">
var ss=null;
var winHeight=0;
if (window.innerHeight){
winHeight = window.innerHeight;
}else if ((document.body) && (document.body.clientHeight))
{winHeight = document.body.clientHeight;}
document.getElementById('main').style.height=winHeight*0.8+"px";
var myChart = echarts.init(document.getElementById('main'));
var option = {
title:{text:'年在線人數(shù)量統(tǒng)計圖表'},
tooltip:{trigger:'item',//因為數(shù)據(jù)比較多，就采用item方式顯示提示
showDelay: 0,//這是多少時間顯示提示信息
hideDelay: 100,//這是提示信息多少時間隱藏
padding: 10,
backgroundColor:'rgba(255,255,0,0.7)',
position : function(p) {
return [p[0], p[1]];
},
axisPointer:{type : 'cross',
crossStyle : {
color: '#1e90ff',
width: 1,
type: 'dashed'
}},
textStyle : {
color:'black',
fontFamily: 'Verdana, sans-serif',
fontSize: 12,
},
formatter: function (params,ticket,callback) {
console.log(params)
var res = params[0] + ' : ' + params[2];
res +=ress(params[1]);//這里就是組合是否需要超鏈接提示，在平均值和最大最小值上明顯是不需要的。
ss=params[1];//這個是為了將數(shù)據(jù)傳出去作為全局都能用的，我比較笨，就先用這個了
setTimeout(function (){
// 僅為了模擬異步回調
callback(ticket, res);
}, 1000)
return 'loading';//顯示loading感覺更好
}
},
legend:{ data:['在線人數(shù)']},
toolbox: {show : true,
feature : {
magicType : {show: true, type: ['line', 'bar']},//折線和柱狀
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable:true,
xAxis : [{
type : 'category',
boundaryGap : false,
data : ['一','二','三','四'],
}],
yAxis : [{
type : 'value',
axisLabel : {
formatter: '{value} 人'
}
}],
series : [{
name:'在線人數(shù)',
type:'line',
data:[],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
}
]
}
myChart.hideLoading();
myChart.setOption(option); //先把可選項注入myChart中
getChartData();//aja后臺交互
function getChartData() {
var xalist=[];
var serlist=[];
myChart.clear();
$.ajax({
type : "post",
async : false, //同步執(zhí)行
cache : false,
url : "${currentContext}/statistics/statistic/statistic/allonline_r",
data: {},
success : function(result) { //我這里因為要頁面顯示默認為數(shù)據(jù)庫里第一年的圖形，所以才用兩次Ajax查詢
if (result) {
var jsonobj=eval(result);
var ye=jsonobj[0].year;
var yea=ye+"年在線人數(shù)統(tǒng)計圖表";//這是拼標題，因為好像直接寫在下一行代碼中不行
option.title={text:yea};
//通過Ajax獲取數(shù)據(jù)
$.ajax({
type : "post",
async : false, //同步執(zhí)行
cache : false,
url : "${currentContext}/statistics/statistic/statistic/allonline_r",
data: {year:ye},
success : function(result) {
if (result) {
var jsonobj=eval(result);
for(var i=0;i<jsonobj.length;i++){ xalist.add(jsonobj[i].year+"."+jsonobj[i].month+"."+jsonobj[i].day+"日");
serlist.add(jsonobj[i].online);
}
option.xAxis[0].data = xalist;
option.series[0].data = serlist;
myChart.hideLoading();
myChart.setOption(option);
}
},
error : function(errorMsg) {
alert("不好意思,圖表請求數(shù)據(jù)失敗啦!");
myChart.hideLoading();
}
});
}
}
});
}
window.onresize =wind;/**當窗口改變時觸發(fā)該事件*/
function wind(){
var dom = document.getElementById('main');
var winHeigh = 0;
if (dom){ //先判斷是否存在
//獲取窗口高度
if (window.innerHeight)
winHeigh = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeigh = document.body.clientHeight;
dom.style.height=winHeigh*0.8+"px";
echarts.init(dom).setOption(option);//這里是eCharts已經說好了的沖引用（http://echarts.baidu.com/doc/doc.html#初始化）
}
}
function ress(e){/**選擇提示框內容*/
var ress='';
if(e=="平均值"|e=="最小值"|e=="最大值"){
return ress;
}else{
ress='<br/>' + '點擊查看:'+'<br/><a href=\"javascript:void(0)\" onclick=\"dayline()\">此日折線圖</a><br/>'+
'<a href=\"javascript:void(0)\" onclick=\"daypie()\">此日餅狀圖</a><br/>'+
'<a href=\"javascript:void(0)\" onclick=\"monthline()\">此月折線圖</a><br/>'+
'<a href=\"javascript:void(0)\" onclick=\"monthpie()\">此月餅狀圖</a><br/>'+
'<a href=\"javascript:void(0)\" onclick=\"yearpie()\">此年餅狀圖</a>';
return ress;
}
}......
</script>
</body>
</html>
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。
