echarts 經過ajax實現動態數據加載

時間 2019-11-09

原文原文鏈接

首先先把官網上的demo拿過來，這時候的柱狀圖數據以及xy的數據都爲空javascript

樣式以下html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ECharts</title>

    <!-- 引入 echarts.js -->
    <script src="../js/echarts.min.js"></script>
    <script src="../js/echarts.js"></script>
    <!--引入js-->
    <script src="../js/jquery-1.10.2.js"></script>
</head>

<body>
<!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));
    // 顯示標題，圖例和空的座標軸
    myChart.setOption({
        title: {
            text: '異步數據加載示例'
        },
        tooltip: {},
        legend: {
            data:['銷量']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '銷量',
            type: 'bar',
            data: []
        }]
    });


</script>

</body>
</html>

如今咱們執行服務器的接口請求把，這張空的柱狀圖填滿，代碼以下java

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ECharts</title>

    <!-- 引入 echarts.js -->
    <script src="../js/echarts.min.js"></script>
    <script src="../js/echarts.js"></script>
    <!--引入js-->
    <script src="../js/jquery-1.10.2.js"></script>
</head>

<body>
<!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));
    // 顯示標題，圖例和空的座標軸
    myChart.setOption({
        title: {
            text: '異步數據加載示例'
        },
        tooltip: {},
        legend: {
            data:['銷量']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '銷量',
            type: 'bar',
            data: []
        }]
    });

    myChart.showLoading();    //數據加載完以前先顯示一段簡單的loading動畫

    var names=[];    //類別數組（實際用來盛放X軸座標值）
    var nums=[];    //銷量數組（實際用來盛放Y座標值）

    $.ajax({
        type : "post",
        async : true,            //異步請求（同步請求將會鎖住瀏覽器，用戶其餘操做必須等待請求完成才能夠執行）
        url : "TestServlet",    //請求發送到TestServlet處
        data : {},
        dataType : "json",        //返回數據形式爲json
        success : function(result) {
            //請求成功時執行該函數內容，result即爲服務器返回的json對象
            if (result) {
                for(var i=0;i<result.length;i++){
                    names.push(result[i].name);    //挨個取出類別並填入類別數組
                }
                for(var i=0;i<result.length;i++){
                    nums.push(result[i].num);    //挨個取出銷量並填入銷量數組
                }
                myChart.hideLoading();    //隱藏加載動畫
                myChart.setOption({        //加載數據圖表
                    xAxis: {
                        data: names
                    },
                    series: [{
                        // 根據名字對應到相應的系列
                        name: '銷量',
                        data: nums
                    }]
                });

            }

        },
        error : function(errorMsg) {
            //請求失敗時執行該函數
            alert("圖表請求數據失敗!");
            myChart.hideLoading();
        }
    })


</script>

</body>
</html>