Echarts 动态数据图表使用

Posted 2020-07-20 If_1989

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);
    }
}


完整的例子如果需要 请留言。