ECharts动态数据+时间轴+dataZoom

最新推荐文章于 2025-06-13 10:59:51 发布
原创 最新推荐文章于 2025-06-13 10:59:51 发布 · 4.9w 阅读 · 55 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #dataZoom #时间轴 #动态数据 

<!DOCTYPE html>
<html lang="en"  style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>Map</title>
    <style>
        body{
            position: relative;
            font-family: "Microsoft YaHei UI";
            /*background-color: #000000;*/
        }
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul,li{
            list-style: none;
        }
        .clear:after{
            display: block;
            content: "";
            clear:both;
        }
        #chart{
            width: 99%;
            height: 80%;
        }
        #timeSpan{
            margin-top: 2%;
        }
        #timeSpan>li{
            float: left;
            width: 100px;
            height: 20px;
            border-radius: 5px;
            background-color: #95BB2F;
            text-align: center;
            cursor: pointer;
            margin-left: 50px;
        }
    </style>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body style="height: 100%; margin: 0;min-width: 1200px;min-height: 770px">
<ul id="timeSpan" class="clear">
    <li>5min</li>
    <li>10min</li>
    <li>15min</li>
    <li>30min</li>
</ul>
<div id="chart"></div>


<script>
    $(function () {
        // var data123 = [
        //     { value: [ '2016/2/18 03:00:00', 363 ] },
        //     { value: [ '2016/2/18 04:00:00', 384 ] },
        //     { value: [ '2016/2/18 05:00:00', 371 ] },
        // ];
        var data_in = [
            918.32,
            902.51,
            900.41,
            873.43,
            885.39,
            897.63,
            892.44,
            879.04,
            850.83,
            848.52,
            844.87,
            834.54,
            832.48,
            815.48,
            811.23,
            821.20,
            805.10,
            794.49,
            801.23,
            788.80,
            769.70,
            789.80,
            763.46,
            758.57,
            773.49,
            764.45,
            739.66,
            757.55,
            731.12,
            724.06,
            732.70,
            723.80,
            714.91,
            723.46,
            705.10,
            708.90,
            723.75,
            703.06,
            684.51,
            692.63,
            683.14,
            671.95,
            691.97,
            684.04,
            667.59,
            688.56,
            659.01,
            652.39,
            670.98,
            638.10,
            655.85,
            627.21,
            648.82,
            631.68,
            614.94,
            642.69,
            626.22,
            613.44,
            641.15,
            613.90,
            601.39,
            623.22,
            602.94,
            589.90,
            612.01,
            590.85,
            591.51,
            585.67,
            559.47,
            557.43,
            518.20,
            504.63,
            506.67,
            512.66,
            440.93,
            614.94,
            642.69,
            626.22,
            613.44,
            641.15,
            613.90,
            601.39,
            623.22,
            602.94,
            598.28,
            593.18,
            625.85,
            625.43,
            611.52,
            660.33,
            669.41,
            707.86,
            729.56,
            728.72,
            770.35,
            800.78,
            791.52,
            797.62,
            808.94,
            625.43,
            611.52,
            660.33,
            669.41,
            707.86,
            729.56,
            728.72,
            770.35,
            800.78,
            676.64,
            598.28,
            593.18,
            625.85,
            625.43,
            611.52,
            660.33,
            669.41,
            707.86,
            729.56,
            728.72,
            770.35,
            800.78,
            791.52,
            797.62,
            808.94,
            817.76,
            797.77,
            806.65,
            763.81,
            771.01,
            796.27,
            777.58,
            776.37,
            821.18,
            814.54,
            832.37,
            853.91,
            870.55,
            861.75,
            888.66,
            888.60,
            910.95,
            934.58,
            920.79,
            923.61,
            921.88,
            1096.03,
            1041.94,
            951.67,
            932.29,
            935.73,
            941.29,
            944.34,
            965.24,
            928.95,
            943.34,
            968.91,
            977.17,
            941.77,
            964.47,
            964.86,
            926.30,
            929.23,
            934.07,
            974.39,
            977.48,
            953.90,
            929.79,
            948.32,
            943.09,
            933.89,
            948.30,
            934.66,
            936.59,
            958.61,
            930.23,
            927.04,
            966.15,
            923.08,
            887.60,
            924.59,
            909.70,
            889.48,
            892.51,
            906.88,
            907.99,
            927.54,
            902.11,
            902.41,
            940.20,
            937.34,
            952.79,
            952.53,
            944.37,
            952.09,
            924.20,
            924.65,
            939.26,
            967.97,
            988.18,
            1017.07,
            1007.07,
            1014.48,
            1016.72,
            1007.58,
            974.98,
            1053.01,
            1044.22,
            1038.93,
            1029.50,
            1093.14,
            1124.30,
            1120.13,
            1123.74,
            1105.22,
            1132.26,
            1124.54,
            1137.46,
            1177.16,
            1114.36,
            1087.06,
            1096.11,
            1083.61,
            1096.21,
            1069.42,
            1090.59,
            1081.66,
            1095.27,
            1105.93,
            1098.18,
            1102.24,
            1115.35,
            1127.81,
            1139.65,
            1159.92,
            1180.29,
            1157.27,
            1201.08,
            1186.57,
            1200.80,
            1244.75,
            1216.21,
            1199.90,
            1224.75,
            1188.85,
            1180.26,
            1151.10,
            1173.41,
            1156.91,
            1160.99,
            1160.67,
            1158.08,
            1129.06,
            1100.04,
            1068.78,
            1102.13,
            1079.86,
            1029.01,
            1032.81,
            995.74,
            979.22,
            924.57,
            901.16,
            868.52,
            964.42,
            902.96,
            899.91,
            902.52,
            926.63,
            899.92,
            911.75,
            879.48,
            857.78,
            862.70,
            868.01,
            868.61,
            867.72,
            831.92,
            841.49,
            828.46,
            918.32,
            902.51,
            900.41,
            873.43,
            885.39,
            897.63,
            892.44,
            879.04,
            850.83,
            848.52,
            918.32,
            902.51,
            900.41,
            873.43,
            885.39,
            897.63,
            892.44,
            879.04,
            850.83,
            848.52,
            844.87,
            834.54,
            832.48,
            815.48,
            811.23,
            821.20,
            805.10,
            794.49,
            801.23,
            788.80,
            769.70,
            789.80,
            763.46,
            758.57,
            773.49,
            764.45,
            739.66,
            757.55,
            731.12,
            724.06,
            732.70,
            723.80,
            714.91,
            723.46,
            705.10,
            708.90,
            723.75,
            703.06,
            684.51,
            692.63,
            683.14,
        ];
        var oneDay = 24 * 3600 *1000;
        var fiveMinutes = 300 * 1000;
        var timestr = '2016/2/18 00:00:00';
        var startTime = +new Date(timestr)-fiveMinutes;

        //把new Date出来的时间格式转换为data123中的日期格式
        function riqigeshi(now){
            return now.toLocaleDateString() + ' ' + now.getHours() + now.toLocaleTimeString().substr(-6,6)
        }

        //用来返回data123一样的数据格式
        function chartData(i,data,now) {
            return {
                value: [
                    riqigeshi(now),
                    data[i]/1024,
                ]
            }
        }

        //把原数据改成data123一样的格式
        function changeData(datain) {
            var liuru = [];
            for (var i = 0; i < 289; i++) {
                startTime = new Date(+startTime + fiveMinutes);
                liuru.push(chartData(i,datain,startTime));
            }
            return liuru;
        }
        var liuru = changeData(data_in);

        var chart = echarts.init(document.getElementById("chart"));
        var option = {
            grid:{
                x:'3.6%',
                y:'5%',
                x2:'2.4%',
                y2:'12%',
            },
            xAxis:{
                type:'time',
                splitNumber:24
            },
            yAxis:{
                type:'value',
                axisLabel:{
                    formatter:'{value} G'       //给Y轴上的刻度加上单位
                },
            },
            dataZoom: [
                {
                    type: 'slider',//数据滑块
                    start:0,
                    minSpan:8,    //5min
                    // minSpan:16,   //10min
                    // minSpan:24,   //15min
                    // minSpan:50,   //30min
                    dataBackground:{
                        lineStyle:{
                            color:'#95BC2F'
                        },
                        areaStyle:{
                            color:'#95BC2F',
                            opacity:1,
                        }
                    },
                    // fillerColor:'rgba(255,255,255,.6)'
                },
                {
                    type:'inside'//使鼠标在图表中时滚轮可用
                }
            ],
            tooltip:{
                trigger: 'axis',
                formatter : function(params) {
                    var result = params[0].value[0];
                    params.forEach(function(item) {
                        result += '<br/>';
                        result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
                        result += item.seriesName + "：";
                        result += isNaN(item.value[1]) ? 0 : (item.value[1]*1024).toFixed(2) + "M";
                    });
                    return result;
                },
            },
            series:{
                name: '流入',
                type: 'line',
                showSymbol: false,
                symbolSize:12,
                data: liuru,
            }
        };

        chart.setOption(option);

        $("#timeSpan").on('click','li',function () {
            var timeSpan = $(this).html();
            switch(timeSpan){
                case '5min':
                    chart.setOption({
                        dataZoom:[
                            {
                                start:92,
                                end:100
                            }
                        ],
                    });
                    break;
                case '10min':
                    chart.setOption({
                        dataZoom:[
                            {
                                start:84,
                                end:100
                            }
                        ],
                    });
                    break;
                case '15min':
                    chart.setOption({
                        dataZoom:[
                            {
                                start:76,
                                end:100
                            }
                        ],
                    });
                    break;
                case '30min':
                    chart.setOption({
                        dataZoom:[
                            {
                                start:50,
                                end:100
                            }
                        ],
                    });
                    break;
            }
        });

        function refresh() {
            // liuru先shift(),再push()
            var liuruShift = liuru.shift();
            var liuruShiftVal = liuruShift.value[1];
            var newlrtime = riqigeshi(new Date(+new Date(liuruShift.value[0])+oneDay+fiveMinutes));
            liuru.push({value:[newlrtime,liuruShiftVal]});
            chart.setOption({
                series:{
                    data:liuru,
                }
            });
        }

        setInterval(function () {
            refresh();
        },3000);

        window.onresize = function () {
            chart.resize();
        };
    }());

</script>
</body>
</html>

使用 ECharts 时间轴功能进行数据可视化
m0_74972192的博客
07-29 3764
ECharts 是一个由百度开源的数据可视化库，支持多种图表类型，如折线图、柱状图、饼图等。它具有高性能、易用性和丰富的交互功能，非常适合用于数据分析和展示。ECharts 是一个功能强大的数据可视化工具，时间轴功能使得展示数据变化趋势变得更加容易。通过本文的示例代码和解析，希望你能更好地理解和应用 ECharts 的时间轴功能。
ECharts实例开发学习笔记二——时间轴
Qing_yun的博客
09-24 2万+
记录一下ECharts时间轴的使用，首先是照着官方的示例做一遍，在这里不要忘了引入timelineOption.js，后面介绍如何动态创建时间轴的记录数，即根据需求可伸缩显示有多少天或者年月等轴标记数。 官网demo： a body{background-color:#000000} // 路径配置,'
用dataZoom配置代替scroll的ECharts图例渲染
最新发布
weixin_45573299的博客
06-13 492
摘要：本文介绍了解决ECharts柱状图数据拥挤问题的方案。当数据过多时，传统横向滚动条会隐藏Y轴，影响使用体验。通过配置ECharts的dataZoom组件，可实现只滑动数据区域的优雅效果。文章详细展示了父组件数据传递和子组件配置的实现代码，包括图表初始化、数据处理和自适应调整等关键步骤。最终效果既能保持图表美观，又能完整查看所有数据，解决了大数据量展示的难题。
echarts利用datazoom实现类似timeline连续变换效果
languagelmz的博客
04-25 2517
利用echarts提供的timeline时间轴组件，可实现通过时间点来控制多个图表的显示。官方配置项说明里面提供了丰富的功能，具体可见echarts_timeline组件。 但经过测试之后发现，timeline提供的时间点都要求是单一选择的，即一次只能显示时间轴上一个点对应的数据。而在我们的项目中，需要能选择一个时间段，也就是能选择时间轴上的一段时间。 利用datazoom组件能够拖动，选择一...
Echarts横坐标时间轴，并缩放数据
程先生的博客
04-10 5654
本文中Echarts的版本为5.5.0首先说一下我们的项目背景，就是需要一个横坐标为的数据。折线分为数值类型和枚举类型，也就是说Y坐标为数值型或者枚举型的数据；然后数据的缩放是这样的，把请求到的数据，一次性的全部显示在折线中，并且需要支持鼠标滚轮和鼠标拖拽式，缩放查看局部的数据。效果如图所示：项目中的难点主要是三部分。1、查询的到的数据，比如查询的是今天的数据，但是今天的话，只有在10点和11点有数据，其他的时间没有数据；2、横坐标下面的显示的当前缩放完成之后的时间范围；
ECharts3 实现动态数据累积图2+时间坐标
热门推荐
mighty13的专栏
09-21 2万+
对ECharts3官网中动态数据+时间坐标轴实例进行了修改，X轴为当前时间，并数据累积。累积数据的方法很简单。把data.shift();注释掉就可以了。可在ECharts3实例中的代码框中粘贴直接查看效果。 function randomData() { now = new Date(+now + 1000); value = value + Math.random() * 21
Echarts 实现动态数据时间轴
weixin_43878117的博客
04-01 7876
<div id="totalFlowRate" style="height:620px;" ></div> handleData(id) { const date = [] const timestr = this.startTime const fiveMinutes = 300 * 1000 // 五分钟 let startTime = +new Date(timestr) - fiveMinutes .
echart 使用datazoom
个人的工作随笔和日记，主要作为一个记录风向平台
11-18 1554
一、效果图 最近做了一个数据量比较大折线图这里记录下过程： 先上效果： 这里的数据是使用传感器采集回来的 x 轴 采集的时间 y轴 采集的数据值 支持鼠标移上去 滚轮缩放滑动数据窗口。 如图一所示 图1 二、 说下制作过程： 使用的是百度的echart 这个大家可以官网学习下： 直接上源码： 新建div <div id="main_t" style="width:1000px;height:400px;">&l...
解决echarts echarts数据动态更新和dataZoom被重置问题
10-15
总结来说，解决echarts数据动态更新和dataZoom重置问题的关键在于正确保存和恢复dataZoom的状态，并合理利用appendData方法进行数据的增量更新。这两项技术点的掌握将有助于提升开发人员在使用echarts库时的图表制作...
echarts实现获取datazoom的起始值(包括x轴和y轴)
10-15
然后，根据y轴的最小值`ystartValue`、最大值`yendValue`以及数据的最小值`min`和最大值`max`，我们可以计算出y轴DataZoom的百分比范围。 需要注意的是，DataZoom的百分比值是基于数据的全量范围，因此我们需要将...
echarts自定义分组，x轴分级，支持多级，支持dataZoom
03-31
在本文中，我们将深入探讨如何使用ECharts，一个流行的JavaScript数据可视化库，来实现自定义分组、X轴分级以及支持多级和dataZoom功能。ECharts提供了丰富的图表类型和高度定制化的选项，使得开发者能够根据需求...
echarts时间轴demo，内含两种实现方式。1.X轴为数值轴(type=value)；2.X轴为时间轴(type=time)
07-11
echarts时间轴demo，内含两种实现方式。 1.X轴为数值轴(type=value)； 2.X轴为时间轴(type=time)。 下载后可直接打开看到效果。 如果对demo有疑问，如无法加载，无法使用，报错等，可添加资源中的联系方式，免费解答...
vue+echarts完整显示x轴的示例以及完整案例.zip
02-15
当X轴数据过多时，可以结合` dataZoom `来动态改变显示范围，避免一次性显示所有标签。 4. **自定义`formatter`**：通过设置` label `的` formatter `函数，我们可以自定义标签的显示内容。比如，可以只显示每个...
echarts属性之dataZoom
lotte
10-29 2751
Echarts 中的 dataZoom--slider 滑动条型数据区域缩放组件。该组件提供了数据缩略图显示、缩放、刷选、拖拽、点击快速定位等数据筛选功能。文中详细介绍了该组件的众多属性，包括是否显示、背景颜色、数据阴影样式、选中部分数据阴影样式、填充颜色、边框颜色、圆角半径、手柄图标、手柄尺寸、手柄样式、移动手柄图标、移动手柄尺寸、移动手柄样式、标签精度、标签格式化器、是否显示详细信息、是否显示数据阴影、实时更新、文本样式以及控制的轴索引和过滤模式等。
Echarts5.3.2可视化案例-时间轴动态柱形图
IT从业者的成长历程
11-09 1874
统计了互联网+最近3年的河南区的获奖情况，想分析下哪几个院校获奖较多，完成时间轴动态柱形图的绘制
ECharts 使用dataZoom.type给x坐标轴加滚动条
旭东怪的博客
08-17 3803
1 使用详解 dataZoom.type 说明：组件类型。 默认值：'slider'。 参数类型：string。 可选值： （1）'slider'，滑动条型数据区域缩放组件，有单独的滑动条，用户在滑动条上进行缩放或漫游。 （2）'inside'，内置型数据区域缩放组件，内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。 2 原始效果图 3 实现代码 var option = { title: {...
echarts柱状图之dataZoom
sisyphus0000的博客
12-22 2168
参考：echarts中dataZoom的使用 - 婧星 - 博客园 dataZoom: [{ type: 'slider', show: true, start: 1, end: 8.
echarts dataZoom实现左右滑动与放大缩小 并精确控制显示几条数据
qq_58307541的博客
01-19 1552
startValue与endValue是使用数量精确控制。//Xdata是横轴的长度。start与end是控制百分比。
echarts dataZoom组件
qq_44213979的博客
08-30 499
dataZoom 组件 用于区域缩放 dataZoom: [{ type:'slider', start: 0, end: 10, height: 20, backgroundColor:'rgba(2,96,171,0.5)', dataBackground:{ lineStyle:{ co
ECharts+Gantt+Demo
03-28
<think>嗯，用户问的是ECharts+Gantt+Demo，我需要先理解这三个部分分别是什么，以及它们如何结合起来。首先，ECharts是百度开源的一个可视化库，主要用于数据图表展示，比如折线图、柱状图等。Gantt图是甘特图，通常用于项目管理，展示任务的时间安排和进度。用户可能想知道如何在ECharts中实现甘特图，并希望有一个演示示例。 接下来，我需要确认ECharts是否原生支持甘特图。根据记忆，ECharts本身没有专门的甘特图类型，但可以通过其他图表类型如条形图进行定制。可能需要使用到坐标系配置、数据格式转换等。这时候，我需要回忆或查找ECharts的官方文档，看看有没有相关的示例或者配置方法。 然后，用户提到“Demo”，说明用户可能需要一个具体的代码示例来展示如何实现。因此，我应该准备一个简单的示例代码，说明如何配置ECharts来生成甘特图，并解释各个部分的作用。此外，还需要考虑数据的结构，甘特图通常需要任务名称、开始时间、持续时间或结束时间，这些数据如何映射到ECharts的选项中。 同时，需要注意ECharts的时间轴处理，可能需要将日期转换为时间戳，或者使用类目轴配合数据。另外，甘特图的条形可能需要水平显示，因此要配置yAxis为类目轴，xAxis为时间轴。还需要考虑进度条的颜色、标签显示、提示信息等细节。 可能遇到的问题包括数据格式的处理、坐标轴的调整、以及交互功能的添加，比如拖拽调整任务时间。不过，作为基础Demo，可能先实现静态的甘特图，再提及进阶的可能性。 最后，需要验证提供的示例代码是否正确，确保没有语法错误，并且能够在ECharts环境中正常运行。同时，提醒用户如果需要更复杂的功能，可能需要结合其他库或自行扩展配置。</think>我将分步骤为您介绍如何基于 ECharts 实现甘特图（Gantt）效果，并提供一个可运行的 Demo： --- ### 一、基本概念 1. **ECharts** 百度开源的 JavaScript 数据可视化库，支持多种图表类型，但原生**不直接提供甘特图类型**。 2. **Gantt 图** 通过**水平条形图**展示任务时间轴，需通过 ECharts 的**自定义配置**实现。 --- ### 二、实现原理 通过以下 ECharts 组件组合实现： - `yAxis`: 类目轴显示任务名称 - `xAxis`: 时间轴显示日期范围 - `series.type: 'bar'`: 横向条形表示任务时间跨度 - `data` 特殊格式处理 --- ### 三、完整 Demo 代码 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 甘特图示例</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script> </head> <body> <div id="ganttChart" style="width: 800px;height:400px;"></div> <script> // 数据格式：[任务名称, 开始时间, 结束时间] const tasks = [ ['需求分析', '2024-01-01', '2024-01-07'], ['UI设计', '2024-01-08', '2024-01-15'], ['开发', '2024-01-16', '2024-02-05'], ['测试', '2024-02-06', '2024-02-20'] ]; // 转换时间格式为时间戳 const data = tasks.map(task => ({ name: task[0], value: [ task[0], new Date(task[1]).getTime(), // 开始时间 new Date(task[2]).getTime() // 结束时间 ] })); const option = { tooltip: { formatter: function(params) { return `${params.name}<br/> 开始: ${formatDate(params.value[1])}<br/> 结束: ${formatDate(params.value[2])}`; } }, xAxis: { type: 'time', min: new Date('2024-01-01').getTime() }, yAxis: { type: 'category', data: tasks.map(task => task[0]) }, series: [{ type: 'bar', data: data, encode: { x: [1, 2], // 使用第2、3个值作为x轴起止 y: 0 // 使用第1个值对应y轴 } }] }; // 时间格式化函数 function formatDate(timestamp) { return new Date(timestamp).toLocaleDateString(); } // 初始化图表 const chart = echarts.init(document.getElementById('ganttChart')); chart.setOption(option); </script> </body> </html> ``` --- ### 四、关键配置说明 1. **数据转换** ```javascript new Date().getTime() // 将日期转为时间戳 ``` 2. **坐标系映射** ```javascript encode: { x: [1, 2], // 数据数组的第2、3项作为x轴起止 y: 0 // 第1项对应y轴类目 } ``` 3. **时间轴配置** ```javascript xAxis: { type: 'time' } // 启用时间坐标系 ``` --- ### 五、扩展功能建议 1. **进度显示** 添加第二条 `bar` 系列显示实际进度 2. **里程碑标记** 使用 `markPoint` 标注关键节点 3. **交互功能** 通过 `dataZoom` 实现时间范围缩放 --- ### 六、注意事项 1. 时间数据必须转换为**时间戳**格式 2. `yAxis.data` 顺序需与任务数据一致 3. 复杂需求可考虑结合 `custom series` 实现更精细控制 需要实时调整任务时，建议结合 WebSocket 或定时器实现数据动态更新。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值