Echats折线图原数据基础上动态刷新

最新推荐文章于 2024-03-05 18:08:37 发布

拼命_小李

最新推荐文章于 2024-03-05 18:08:37 发布

阅读量864

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/m0_43432638/article/details/86622926

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

简介:
鄙人是对大数据有着浓厚兴趣的小草根码农，大数据少不了的就是数据可视化，最近研究了一下如何动态实时刷新Echats的图表，查了很多资料，并进入的Echats的官网，直接copy人家的动态图表但是不知道为啥什么，放在自己的电脑上就不是动态的，甚至都系显示不出来，只好自己动手研究了，经过自己的努力终于实现了echats动态刷新折线图，直接上代码喽!

!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <!--<script type="text/javascript" src="jquery.js"></script>-->
    <script type="text/javascript" src="echarts.js"></script>//引入echats.js包
    <body>
        <div id="main" style="width: 1000px;height:600px;"></div>
    </body>
</html>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例     
    var myChart = echarts.init(document.getElementById('main'));//这个是必须要写的
    var ydata = [4,8,1,4,2,3,7,1,7,8];//定义一个ydata数据
 option = {
    title: {
        text: '时刻动态数据', 
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#283b56'
            }
        }
    },
    legend: {
        data:['最新成交价', '预购队列']
    },
    toolbox: {
        show: true,
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    dataZoom: {
        show: true,
        start: 0,//图表下放的显示数量
        end: 100,
       // filterMode: 'empty'
    },
    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 - 1000);
                }
                return res;
            })()
        }
    ],
    yAxis: [
        {
            type: 'value',
            scale: true,
            name: '价格',
            max: 30,
            min: 0,
            boundaryGap: [0.2, 0.2]
        }
    ],
    series: [
        {
            name:'最新成交价',
            type:'line',//修改显示图表的类型该类型为折线图
            data:ydata//为轴的数值
        }
    ]
};     
   setInterval(function() {
    	axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');//获取时间将非数字去掉
   	ydata.shift();//删除掉第一个值
   	ydata.push((Math.random() * 10 + 5).toFixed(1) - 0);//随机生成一个数添加到末尾
    	option.xAxis[0].data.shift();//获取x坐标轴的位置数据删除掉第一个值
 	    option.xAxis[0].data.push(axisData);//获取当前的时间将其放置在最后一个位置      
        myChart.setOption({ //重新对表的一些属性进行修改,下面就是对option重新修改的内容
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            data:option.xAxis[0].data}],
        series: [{
            name:'最新成交价',
            type:'line',
            data:ydata//为轴的数值
        }]
        });
     }, 3000);//setInterval()方法的使用具体请百度，设置时间每三秒进行数据的更新
myChart.setOption(option);   // 使用刚指定的配置项和数据显示图表。
</script>

上面就是代码部分，有不懂得一起学习咨询我，哈哈，网上的资料都不是很全，这方面，也不是都很准确，希望我能给你带来帮助!
效果截图:
在这里插入图片描述