快速基于echarts的大数据可视化

转载于：http://blog.csdn.net/bdchome/article/details/46817647
快速基于echarts的大数据可视化，echarts纯粹的js实现的图表工具，快速开发的步骤如下：

1、引入echarts的依赖js库

2、设置展示的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'));  
          
          
        //官网复制option 开始  
          
          
        option = {  
                title : {  
                    text: '某地区蒸发量和降水量',  
                    subtext: '纯属虚构'  
                },  
                tooltip : {  
                    trigger: 'axis'  
                },  
                legend: {  
                    data:['蒸发量']  
                },  
                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:'蒸发量',  
                        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: '平均值'}  
                            ]  
                        }  
                    }  
                ]  
            };  
                                  
          
        //官网复制option 结束  
        myInterval(restPath);  
    });  
}  
  
  
//填充数据  
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数据

//ajax获取数据  
function myInterval(restPath) {  
    $.ajax({  
        type : 'get',// jquey是不支持post方式跨域的  
        async : false,  
        url : baseUrl +restPath,  // 跨域请求的URL  
        dataType : 'jsonp',  
        jsonp : "callback",// 服务端用于接收callback调用的function名的参数  
        success : function(result) {  
            setResult(result, option, myChart);  
        },  
        error : function() {  
            alert('fail');  
        }  
    });  
}  

5、定时调度及参数设置

//ajax获取数据  
function myInterval(restPath) {  
    $.ajax({  
        type : 'get',// jquey是不支持post方式跨域的  
        async : false,  
        url : baseUrl +restPath,  // 跨域请求的URL  
        dataType : 'jsonp',  
        jsonp : "callback",// 服务端用于接收callback调用的function名的参数  
        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