摘要：動態(tài)獲取數(shù)據(jù)庫的實時數(shù)據(jù)的簡單實例。實例演示跳轉引入文件。引入的文件方式有多種，比較推薦模塊化的引入方式。小拽的簡單是直接引入文件，提供一個下載地址點擊下載部分代碼一塊用于的展現(xiàn)。

echarts動態(tài)獲取數(shù)據(jù)庫的實時數(shù)據(jù)的簡單實例。實例演示：  跳轉demo 

引入echarts的文件方式有多種，比較推薦模塊化的引入方式。
小拽的簡單demo是直接引入文件，提供一個下載地址 ： 點擊下載

一塊div 用于echart的展現(xiàn)。

這里是一個布局展現(xiàn)

$(document).ready(function () {

    // 繪制反饋量圖形
    var init_echarts = function () {
        var refreshChart = function (show_data) {
            my_demo_chart = echarts.init(document.getElementById("echart_show"));
            my_demo_chart.showLoading({
                text: "加載中...",
                effect: "whirling"
            });


            var echarts_all_option = {
                title: {
                    text: "動態(tài)數(shù)據(jù)",
                    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}
                    }
                },
                dataZoom: {
                    show: false,
                    start: 0,
                    end: 100
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: true,
                        data: (function () {
                            var now = new Date();
                            var res = [];
                            var len = 10;
                            while (len--) {
                                res.unshift(now.toLocaleTimeString().replace(/^D*/, ""));
                                now = new Date(now - 2000);
                            }
                            return res;
                        })()
                    },
                    {
                        type: "category",
                        boundaryGap: true,
                        data: (function () {
                            var res = [];
                            var len = 10;
                            while (len--) {
                                res.push(len + 1);
                            }
                            return res;
                        })()
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        scale: true,
                        name: "價格",
                        boundaryGap: [0.2, 0.2]
                    },
                    {
                        type: "value",
                        scale: true,
                        name: "預購量",
                        boundaryGap: [0.2, 0.2]
                    }
                ],
                series: [
                    {
                        name: "預購隊列",
                        type: "bar",
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        // 獲取到數(shù)據(jù)庫的數(shù)據(jù)
                        data: show_data[0]
                    },
                    {
                        name: "最新成交價",
                        type: "line",
                        // 實時獲取的數(shù)據(jù)
                        data:show_data[1]
                    }
                ]
            };

            my_demo_chart.hideLoading();
            my_demo_chart.setOption(echarts_all_option);

        };

        // 獲取原始數(shù)據(jù)
        $.ajax({
            url: "http://cuihuan.net:1015/demo_file/echarts_realtime_demo/get_data.php",
            data: {type: "2"},
            success: function (data) {
                // 根據(jù)數(shù)據(jù)庫取到結果拼接現(xiàn)在結果
                refreshChart(eval(data));
            }
        });

    };

    // 開啟實時獲取數(shù)據(jù)更新
    $("#getData").on("click",function() {
        var timeTicket;
        var lastData = 11;
        var axisData;
        clearInterval(timeTicket);
        timeTicket = setInterval(function () {
            // 獲取實時更新數(shù)據(jù)
            $.ajax({
                url: "http://cuihuan.net:1015/demo_file/echarts_realtime_demo/get_data.php",
                data: {type: "new"},
                success: function (data) {
                    // 根據(jù)條件轉換成相應的api 轉化為echart 需要的數(shù)據(jù)
                    // todo 更新數(shù)據(jù)采用隨機更新的方式
                    lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1);
                    lastData = lastData.toFixed(1) - 0;
                    axisData = (new Date()).toLocaleTimeString().replace(/^D*/, "");

                    // 動態(tài)數(shù)據(jù)接口 addData
                    my_demo_chart.addData([
                        [
                            0,        // 系列索引
                            Math.round(Math.random() * 1000), // 新增數(shù)據(jù)
                            true,     // 新增數(shù)據(jù)是否從隊列頭部插入
                            false     // 是否增加隊列長度，false則自定刪除原有數(shù)據(jù)，隊頭插入刪隊尾，隊尾插入刪隊頭
                        ],
                        [
                            1,        // 系列索引
                            lastData, // 新增數(shù)據(jù)
                            false,    // 新增數(shù)據(jù)是否從隊列頭部插入
                            false,    // 是否增加隊列長度，false則自定刪除原有數(shù)據(jù)，隊頭插入刪隊尾，隊尾插入刪隊頭
                            axisData  // 坐標軸標簽
                        ]
                    ]);
                }
            });

        }, 2100);

        // 關閉更新操作
        $("#stopData").on("click", function () {
            clearInterval(timeTicket);
        });

    });


    // 默認加載
    var default_load = (function () {
        init_echarts();
    })();
});

/**
 * 連接數(shù)據(jù)庫獲取數(shù)據(jù)
 *
 * User: cuixiaohuan
 * Date: 15/12/4
 * Time: 下午6:47
 */

// 獲取請求的類型
$type = $_GET["type"];

// 連接服務器
$link = mysql_connect("ip:port", "user", "password");
if (!$link) {
    die("Could not connect:" . mysql_error());
}

// 獲取test庫數(shù)據(jù)
$crowd_db = mysql_select_db("test", $link);
$day_time = date("Y-m-d");

// 根據(jù)傳輸過來的數(shù)據(jù)獲取數(shù)據(jù)
$static_sql = "select v from test where id = " . $type . " limit 10";

// 獲取數(shù)據(jù)之后返回
$res = mysql_query($static_sql, $link_2004);

if ($res) {
    // 將結果進行入庫操作
    $row = mysql_fetch_row($res);

    if($row[0]){
        echo $row[0];
    }
    mysql_free_result($res);
}

小拽的demo中，根據(jù)echarts的api，繪制出了原有的圖形展示；之后，對js設置了個定時任務，實時的去獲取數(shù)據(jù)庫中可能新入庫的數(shù)據(jù)，接口通過php簡單調(diào)用數(shù)據(jù)庫實現(xiàn)。

小拽個人小站