第一次接觸eCharts，學(xué)習(xí)中。

專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)惠民免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

實(shí)現(xiàn)功能：1、進(jìn)入展示折線(xiàn)圖（line）,可轉(zhuǎn)換為柱狀和存圖；

          2、折線(xiàn)圖上提示上加超鏈接功能；

          3、整個(gè)圖像可以隨窗口大小改變而改變；

          4、兼容到至少I(mǎi)E7；

 

<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:'年在線(xiàn)人數(shù)量統(tǒng)計(jì)圖表'},
                        tooltip:{trigger:'item',//因?yàn)閿?shù)據(jù)比較多，就采用item方式顯示提示
                                    showDelay: 0,//這是多少時(shí)間顯示提示信息
                                    hideDelay: 100,//這是提示信息多少時(shí)間隱藏
                                    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];//這個(gè)是為了將數(shù)據(jù)傳出去作為全局都能用的，我比較笨，就先用這個(gè)了
                                        setTimeout(function (){
                                            // 僅為了模擬異步回調(diào)
                                            callback(ticket, res);
                                        }, 1000)
                                        return 'loading';//顯示loading感覺(jué)更好
                                    }
                                },
                        legend:{ data:['在線(xiàn)人數(shù)']},
                        toolbox: {show : true,
                                  feature : {
                                  magicType : {show: true, type: ['line', 'bar']},//折線(xiàn)和柱狀
                                  restore : {show: true},
                                  saveAsImage : {show: true}
                                    }
                                },
                        calculable:true,
                        xAxis : [{
                                        type : 'category',
                                        boundaryGap : false,
                                        data : ['一','二','三','四'],
                                    }],
                        yAxis : [{
                                        type : 'value',
                                        axisLabel : {
                                            formatter: '{value} 人'
                                        }
                                    }],
        
                        series : [{
                                        name:'在線(xiàn)人數(shù)',
                                        type:'line',
                                        data:[],
                                        markPoint : {
                                            data : [
                                                {type : 'max', name: '最大值'},
                                                {type : 'min', name: '最小值'}
                                            ]
                                        },
                                        markLine : {
                                            data : [
                                                {type : 'average', name: '平均值'}
                                            ]
                                        }
                                    }
                                    
                                ]
        } 
         myChart.hideLoading();
         myChart.setOption(option); //先把可選項(xiàng)注入myChart中  
         getChartData();//aja后臺(tái)交互   
       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) {  //我這里因?yàn)橐?yè)面顯示默認(rèn)為數(shù)據(jù)庫(kù)里第一年的圖形，所以才用兩次Ajax查詢(xún)
                        if (result) { 
                            var jsonobj=eval(result); 
                            var ye=jsonobj[0].year;
                            var yea=ye+"年在線(xiàn)人數(shù)統(tǒng)計(jì)圖表";//這是拼標(biāo)題，因?yàn)楹孟裰苯訉?xiě)在下一行代碼中不行
                            option.title={text:yea};
                            //通過(guò)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("不好意思,圖表請(qǐng)求數(shù)據(jù)失敗啦!");  
                                    myChart.hideLoading();  
                                }  
                            });
                        } 
                    }
                });  
        }
window.onresize =wind;/**當(dāng)窗口改變時(shí)觸發(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已經(jīng)說(shuō)好了的沖引用（http://echarts.baidu.com/doc/doc.html#初始化）
            }
        }
        
     function ress(e){/**選擇提示框內(nèi)容*/
             var ress='';
             if(e=="平均值"|e=="最小值"|e=="最大值"){
               return ress;
             }else{
                 ress='<br/>' + '點(diǎn)擊查看:'+'<br/><a href=\"javascript:void(0)\" onclick=\"dayline()\">此日折線(xiàn)圖</a><br/>'+
                                             '<a href=\"javascript:void(0)\" onclick=\"daypie()\">此日餅狀圖</a><br/>'+
                                             '<a href=\"javascript:void(0)\" onclick=\"monthline()\">此月折線(xiàn)圖</a><br/>'+
                                             '<a href=\"javascript:void(0)\" onclick=\"monthpie()\">此月餅狀圖</a><br/>'+
                                             '<a href=\"javascript:void(0)\" onclick=\"yearpie()\">此年餅狀圖</a>';
                 return ress;
             }
         }

    ......

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

網(wǎng)頁(yè)題目：eCharts項(xiàng)目完整實(shí)踐（一）
文章網(wǎng)址：http://m.rwnh.cn/article48/ggdcep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、面包屑導(dǎo)航、企業(yè)建站、微信小程序、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)