快速基于echarts的大數據可視化

jopen 8年前發布 | 44K 次閱讀圖表/報表制作

快速基于echarts的大數據可視化，echarts純粹的js實現的圖表工具，快速開發的步驟如下：

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、設置展示的div

<!-- 為ECharts準備一個具備大小（寬高）的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'));


        //官網復制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');
        }
    });
}

展示效果圖: