第一次接触eCharts，学习中。
实现功能：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:'年在线人数量统计图表'},
tooltip:{trigger:'item',//因为数据比较多，就采用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];//这个是为了将数据传出去作为全局都能用的，我比较笨，就先用这个了
setTimeout(function (){
// 仅为了模拟异步回调
callback(ticket, res);
}, 1000)
return 'loading';//显示loading感觉更好
}
},
legend:{ data:['在线人数']},
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:'在线人数',
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, //同步执行
cache : false,
url : "${currentContext}/statistics/statistic/statistic/allonline_r",
data: {},
success : function(result) { //我这里因为要页面显示默认为数据库里第一年的图形，所以才用两次Ajax查询
if (result) {
var jsonobj=eval(result);
var ye=jsonobj[0].year;
var yea=ye+"年在线人数统计图表";//这是拼标题，因为好像直接写在下一行代码中不行
option.title={text:yea};
//通过Ajax获取数据
$.ajax({
type : "post",
async : false, //同步执行
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("不好意思,图表请求数据失败啦!");
myChart.hideLoading();
}
});
}
}
});
}
window.onresize =wind;/**当窗口改变时触发该事件*/
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>
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
