eCharts项目完整实践（一）

第一次接触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;
             }
         }

    ......

   
 

本文题目：eCharts项目完整实践（一）
本文地址：http://6mz.cn/article/ggdcep.html