echarts動態獲取數據實例

時間 2019-11-07

標籤 echarts 動態獲取數據實例简体版

原文原文鏈接

echarts動態獲取數據庫的實時數據的簡單實例。實例演示：跳轉demo php

引入echarts 文件。

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

html 部分代碼

一塊div 用於echart的展示。mysql

<div id="echart_show" style="height:500px">這裏是一個佈局展示</div>

js 部分代碼

$(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: '動態數據',
                    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,
                        // 獲取到數據庫的數據
                        data: show_data[0]
                    },
                    {
                        name: '最新成交價',
                        type: 'line',
                        // 實時獲取的數據
                        data:show_data[1]
                    }
                ]
            };

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

        };

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

    };

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

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

        }, 2100);

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

    });


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

php 部分代碼

/**
 * 鏈接數據庫獲取數據
 *
 * 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庫數據
$crowd_db = mysql_select_db('test', $link);
$day_time = date("Y-m-d");

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

// 獲取數據以後返回
$res = mysql_query($static_sql, $link_2004);

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

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