轉(zhuǎn)載于：http://blog.csdn.net/bdchome/article/details/46817647
快速基于echarts的大數(shù)據(jù)可視化，echarts純粹的js實(shí)現(xiàn)的圖表工具，快速開發(fā)的步驟如下：

1、引入echarts的依賴js庫

<script type="text/javascript" src="js/esl/esl.js"></script>  
<script type="text/javascript" src="js/echarts.js"></script>  
<script type="text/javascript" src="js/jquery.js"></script>  

2、設(shè)置展示的div

<!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom -->  
<div id="main" style="height: 300px"></div>  

3、繪圖的JS

var myChart;  
var option;  
  
// 畫圖  
function drawCharts(echartsHomePath) {  
    // 路徑配置  
    require.config({  
        paths : {  
            echarts : echartsHomePath +'js'  
        }  
    })  
      
    // 使用  
    require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' ], function(  
            ec) {  
        myChart = ec.init(document.getElementById('main'));  
          
          
        //官網(wǎng)復(fù)制option 開始  
          
          
        option = {  
                title : {  
                    text: '某地區(qū)蒸發(fā)量和降水量',  
                    subtext: '純屬虛構(gòu)'  
                },  
                tooltip : {  
                    trigger: 'axis'  
                },  
                legend: {  
                    data:['蒸發(fā)量']  
                },  
                toolbox: {  
                    show : true,  
                    feature : {  
                        mark : {show: true},  
                        dataView : {show: true, readOnly: false},  
                        magicType : {show: true, type: ['line', 'bar']},  
                        restore : {show: true},  
                        saveAsImage : {show: true}  
                    }  
                },  
                calculable : true,  
                xAxis : [  
                    {  
                        type : 'category',  
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']  
                    }  
                ],  
                yAxis : [  
                    {  
                        type : 'value'  
                    }  
                ],  
                series : [  
                    {  
                        name:'蒸發(fā)量',  
                        type:'bar',  
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],  
                        markPoint : {  
                            data : [  
                                {type : 'max', name: '最大值'},  
                                {type : 'min', name: '最小值'}  
                            ]  
                        },  
                        markLine : {  
                            data : [  
                                {type : 'average', name: '平均值'}  
                            ]  
                        }  
                    }  
                ]  
            };  
                                  
          
        //官網(wǎng)復(fù)制option 結(jié)束  
        myInterval(restPath);  
    });  
}  
  
  
//填充數(shù)據(jù)  
function setResult(result, option, myChart) {  
    if (result) {  
        option.title.text = "每日apputrack趨勢圖";  
        option.title.subtext = "apputrack";  
        option.legend.data[0] = "apputrack";  
        option.xAxis[0].data = result.day;  
        option.series[0].name = "apputrack";  
        option.series[0].data = result.cnt;  
        myChart.setOption(option);  
    }  
}  

4、ajax獲取restful數(shù)據(jù)

//ajax獲取數(shù)據(jù)  
function myInterval(restPath) {  
    $.ajax({  
        type : 'get',// jquey是不支持post方式跨域的  
        async : false,  
        url : baseUrl +restPath,  // 跨域請求的URL  
        dataType : 'jsonp',  
        jsonp : "callback",// 服務(wù)端用于接收callback調(diào)用的function名的參數(shù)  
        success : function(result) {  
            setResult(result, option, myChart);  
        },  
        error : function() {  
            alert('fail');  
        }  
    });  
}  

5、定時(shí)調(diào)度及參數(shù)設(shè)置

//ajax獲取數(shù)據(jù)  
function myInterval(restPath) {  
    $.ajax({  
        type : 'get',// jquey是不支持post方式跨域的  
        async : false,  
        url : baseUrl +restPath,  // 跨域請求的URL  
        dataType : 'jsonp',  
        jsonp : "callback",// 服務(wù)端用于接收callback調(diào)用的function名的參數(shù)  
        success : function(result) {  
            setResult(result, option, myChart);  
        },  
        error : function() {  
            alert('fail');  
        }  
    });  
} 

展示效果圖:
http://img.blog.csdn.net/20150709154447506?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center