资讯专栏INFORMATION COLUMN

echarts动态获取数据实例

张宪坤 / 1602人阅读

摘要:动态获取数据库的实时数据的简单实例。实例演示跳转引入文件。引入的文件方式有多种,比较推荐模块化的引入方式。小拽的简单是直接引入文件,提供一个下载地址点击下载部分代码一块用于的展现。

echarts动态获取数据库的实时数据的简单实例。实例演示: 跳转demo

引入echarts 文件。

引入echarts的文件方式有多种,比较推荐模块化的引入方式。
小拽的简单demo是直接引入文件,提供一个下载地址 : 点击下载

html 部分代码

一块div 用于echart的展现。

这里是一个布局展现
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);
}
简单说明

小拽的demo中,根据echarts的api,绘制出了原有的图形展示;之后,对js设置了个定时任务,实时的去获取数据库中可能新入库的数据,接口通过php简单调用数据库实现。

小拽个人小站

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/21263.html

相关文章

  • Echarts轻松入门,内附踩坑秘籍

    摘要:中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。注内容摘自官网,原文地址 首先介绍一下我们的主角ECharts ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 **Canvas** 类库 ZRen...

    YacaToy 评论0 收藏0
  • Echarts轻松入门,内附踩坑秘籍

    摘要:中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。注内容摘自官网,原文地址 首先介绍一下我们的主角ECharts ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 **Canvas** 类库 ZRen...

    Tony 评论0 收藏0
  • Echarts轻松入门,内附踩坑秘籍

    摘要:中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。注内容摘自官网,原文地址 首先介绍一下我们的主角ECharts ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 **Canvas** 类库 ZRen...

    tainzhi 评论0 收藏0
  • echarts结合高德API进行地图下钻

    摘要:广告开始最近做了表格数据转成图表展示的一个组件,地址如下整合地图的时候发现针对地级市的一些文件太多了,全部引入后有将近,所以就用了下高德老爷给的组件和接口,然后弄完在这记录一下虽然这种例子在社区里有很多这个组件文件放在了中,样式奇丑,请原谅 /——————广告开始——————/ 最近做了表格数据转成图表展示的一个react组件,地址如下: https://github.com/Lyla...

    happen 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<