第一次接触eCharts，学习中。
专注于为中小企业提供成都网站建设、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业惠民免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了1000+企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
实现功能：1、进入展示折线图（line）,可转换为柱状和存图；
2、折线图上提示上加超链接功能；
3、整个图像可以随窗口大小改变而改变；
4、兼容到至少IE7；
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此日折线图
'+
'此日饼状图
'+
'此月折线图
'+
'此月饼状图
'+
'此年饼状图';
return ress;
}
}
......
