echarts动态图表

最新推荐文章于 2024-08-07 16:34:05 发布

lieut9011

最新推荐文章于 2024-08-07 16:34:05 发布

阅读量1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Samete9011/article/details/54908040

版权

这篇博客展示了如何利用Echarts库创建一个动态更新的数据图表。通过设置Echarts的配置项，包括时间轴xAxis、数值轴yAxis、线型系列series以及定时更新数据的函数，可以实现数据随着时间变化的实时展示。示例代码中创建了一个显示最新成交价的动态线图，每两秒更新一次数据。

摘要由CSDN通过智能技术生成

option = {
    title: {
        text: '动态数据',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        // data:['最新成交价', '预购队列']
        data:['最新成交价']
    },
    toolbox: {
        show: true,
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    dataZoom: {
        show: false,
        start: 0,
        end: 100
    },
    xAxis: [
        {
            type: 'category',
            // boundaryGap: false,//此为面积图设置
            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;