Echarts x轴为time的用法代码示例

 更新时间:2023年11月11日 09:07:09   作者:GarsonW  
平时项目里数据可视化展示用的大多是echarts或者highcharts,下面这篇文章主要给大家介绍了关于Echarts x轴为time用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

'time' x轴的格式:

x轴设置type为time(不需要转换X轴显示的文字) 正常情况下还应该定义一个x轴的起始范围,数据格式如:

max: "2021-01-04 08:24:38" , min: "2021-01-04 08:14:36"

然后series中的 data也应该设置为二维数组类型如 :

[ ["2021-01-04 08:14:36", 60],["2021-01-04 08:14:46", 56] ]

具体实现代码:

option = {
  xAxis: {
    type: 'time',
    min: "2021-01-04 08:14:36",
    max: "2021-01-04 08:24:38",
  },
  yAxis: {
    type: 'value',
},
  series: [
    {
      data: [ ["2021-01-04 08:14:36", 60],["2021-01-04 08:14:46", 56],["2021-01-04 08:20:46", 23],["2021-01-04 08:22:46", 40] ],
      type: 'line'
    }
  ]
};

动态获取:

显而易见的我们需要:

(1)max,min的时间 (2)时间和数据的二维数组。

我们可以先通过for循环遍历数据得到:

(1)所有的日期(2)series的二维数组:[时间戳,数据值]

      for (let i = 0; i < TotalData.length; i++) {
        dateData[i] = TotalData[i].date;//获取时间
        seriesData[i] = [TotalData[i].date,TotalData[i].value];//获取数据的二维数组
      }

进而通过打擂台比较算法,得出最大(max)和最小(min)的日期:

      //选出最大和最小日期
      var maxDateStr = '0001/01/01';
      var minDateStr = '9999/12/31';
      var maxDate = new Date(maxDateStr);
      var minDate = new Date(minDateStr);
      for (let i = 0; i < dateData.length; i++) {
          dateData[i] = dateData[i].replace(/-/g,"/")
          var tempDate = new Date(dateData[i])
          console.log(tempDate)
          if(tempDate>maxDate) maxDate = tempDate;
          if(tempDate<minDate) minDate = tempDate;
      }

这样我们就获得了我们需要的数据,可以进行设置了。

效果图:

总结 

到此这篇关于Echarts x轴为time用法的文章就介绍到这了,更多相关Echarts x轴为time用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS限制输入框输入的实现代码

    JS限制输入框输入的实现代码

    这篇文章主要介绍了JS限制输入框输入的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • javascript基本数据类型和对象类型归档问题解析

    javascript基本数据类型和对象类型归档问题解析

    这篇文章主要介绍了javascript基本数据类型和对象类型归档,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • 基于layui table返回的值的多级嵌套的解决方法

    基于layui table返回的值的多级嵌套的解决方法

    今天小编就为大家分享一篇基于layui table返回的值的多级嵌套的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 前端实现CSV文件解析的方法详解

    前端实现CSV文件解析的方法详解

    这篇文章主要为大家详细介绍了前端实现CSV文件解析的相关方法,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以了解一下
    2024-03-03
  • 深入理解 TypeScript Reflect Metadata

    深入理解 TypeScript Reflect Metadata

    这篇文章主要介绍了深入理解 TypeScript Reflect Metadata,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • JS+CSS实现自动改变切换方向图片幻灯切换效果的方法

    JS+CSS实现自动改变切换方向图片幻灯切换效果的方法

    这篇文章主要介绍了JS+CSS实现自动改变切换方向图片幻灯切换效果的方法,实例分析了javascript操作图片切换方向的幻灯片技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • JavaScript 面向对象基础简单示例

    JavaScript 面向对象基础简单示例

    这篇文章主要介绍了JavaScript 面向对象基础,结合简单实例形式分析了JavaScript面向对象程序设计中类的定义、类方法与属性相关操作技巧,需要的朋友可以参考下
    2019-10-10
  • js和jq使用submit方法无法提交表单的快速解决方法

    js和jq使用submit方法无法提交表单的快速解决方法

    下面小编就为大家带来一篇js和jq使用submit方法无法提交表单的快速解决方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考
    2016-05-05
  • es6新特性之 class 基本用法解析

    es6新特性之 class 基本用法解析

    这篇文章主要介绍了es6新特性之 class 基本用法 ,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • 使用js获取伪元素的content实例

    使用js获取伪元素的content实例

    下面小编就为大家带来一篇使用js获取伪元素的content实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论