Echarts 動態數據圖表使用

Echarts 純JS 圖形報表控件，具體 請自行百度，此處 在項目中使用到的一個 動態Chart圖的實現。

以 動態獲取 CPU使用狀況爲例，經過Aajx 請求獲取數據， 服務端 返回 數值便可。

官方DEMO：http://echarts.baidu.com/demo.html#dynamic-data

 

第一步：下載 Echart.min.js

第二步：把文件複製到項目Scripts 文件夾中

第三步：新建一個測試頁面

第四步： 看代碼

 

前端：

Html:
<script type="text/javascript" src="../../Scripts/echarts.min.js"></script>
<div>
 <div id="Cpumain" style="width:800px;height:500px;">//圖表容器
 </div>
</div>

Js:

function CpuChart() {
        var dom = document.getElementById("Cpumain");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        title: {
            text: 'CPU使用狀況',
            subtext: '服務器:' + ip
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['CPU佔用率']
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
        },
        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: '佔用率',
                max: 100,
                min: 0,
                boundaryGap: [0.2, 0.2]
            }
        ],
        series: [
 
            {
                name: '佔用率',
                type: 'line',
                data: (function () {
                    var res = [];
                    var len = 0;
                    while (len < 5) {
                        res.push((Math.random() * 10 + 5).toFixed(1) - 0);
                        len++;
                    }
                    return res;
                })()
            }
        ]
    };
    clearInterval(app.timeTicket);
    app.count = 11;
    app.timeTicket = setInterval(function () {
        axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
        $.ajax({
            url: // 請求地址 ,
            type: 'post',
            data: { Ip: ip },
            success: function (msg) {
                var data0 = option.series[0].data;
                var datas = msg.split('|');
                if (datas[0] == "-1") {
                    data0.shift();
                    data0.push(-1);
                }
                else {
                    data0.shift();
                    data0.push(datas[1]);
                }
 
 
 
            }
 
        })
        option.xAxis[0].data.shift();
        option.xAxis[0].data.push(axisData);
        myChart.setOption(option);
    }, 2100);
    ;
    if (option && typeof option === "object") {
        var startTime = +new Date();
        myChart.setOption(option, true);
        var endTime = +new Date();
        var updateTime = endTime - startTime;
        // console.log("Time used:", updateTime);
    }
}完整的例子若是須要 請留言。