eCharts项目完整实践（一）

2024-12-08 技术教程

第一次接触eCharts，学习中。

实现功能：1、进入展示折线图（line）,可转换为柱状和存图；

2、折线图上提示上加超链接功能；

3、整个图像可以随窗口大小改变而改变；

4、兼容到至少IE7；

<scripttype="text/javascript">varss=null;varwinHeight=0;if(window.innerHeight){winHeight=window.innerHeight;}elseif((document.body)&&(document.body.clientHeight)){winHeight=document.body.clientHeight;}document.getElementById('main').style.height=winHeight*0.8+"px";varmyChart=echarts.init(document.getElementById('main'));varoption={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)varres=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后台交互functiongetChartData(){varxalist=[];varserlist=[];myChart.clear();$.ajax({type:"post",async:false,//同步执行cache:false,url:"${currentContext}/statistics/statistic/statistic/allonline_r",data:{},success:function(result){//我这里因为要页面显示默认为数据库里第一年的图形，所以才用两次Ajax查询if(result){varjsonobj=eval(result);varye=jsonobj[0].year;varyea=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){varjsonobj=eval(result);for(vari=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;/**当窗口改变时触发该事件*/functionwind(){vardom=document.getElementById('main');varwinHeigh=0;if(dom){//先判断是否存在//获取窗口高度if(window.innerHeight)winHeigh=window.innerHeight;elseif((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#初始化）}}functionress(e){/**选择提示框内容*/varress='';if(e=="平均值"|e=="最小值"|e=="最大值"){returnress;}else{ress=' '+'点击查看:'+' <ahref=\"javascript:void(0)\"onclick=\"dayline()\">此日折线图</a> '+'<ahref=\"javascript:void(0)\"onclick=\"daypie()\">此日饼状图</a> '+'<ahref=\"javascript:void(0)\"onclick=\"monthline()\">此月折线图</a> '+'<ahref=\"javascript:void(0)\"onclick=\"monthpie()\">此月饼状图</a> '+'<ahref=\"javascript:void(0)\"onclick=\"yearpie()\">此年饼状图</a>';returnress;}}

......

</script>
</body>
</html>