echarts x坐标轴自定义区间时间动态读秒

最新推荐文章于 2024-08-13 18:13:57 发布

June_Wong

最新推荐文章于 2024-08-13 18:13:57 发布

阅读量7.6k

点赞数 2

分类专栏： VUE eharts 文章标签： echarts vue

本文链接：https://blog.csdn.net/June_Wong/article/details/92774760

版权

本文介绍了如何使用ECharts创建一个X轴在选定时间范围内动态读秒的效果。通过设置X轴最大最小值并结合setInterval计时器，每秒更新最大最小值，实现X轴实时滚动。在Vue项目中，可通过切换按钮改变X轴的时间范围。

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

效果：x轴根据选择的时间范围内进行读秒
在这里插入图片描述
思路：
设置x轴的最大最小值，并添加setInterval计时，每秒最大最小值同时加1000毫秒，这样就会有x轴在读秒的效果；

echarts代码;


// 获取小时秒分的时候是不会补充0的，需要自己转换一下
function timeAdd0(str) {
   
    if(str.length<=1){
   
      str='0'+str;
    }
    return str
}

let startTime = '这是开始时间（需要是时间戳格式）';
let endTime = '这是结束时间（需要是时间戳格式）';
let data = []; // 按照echarts的数据格式返回

 // 基础数据配置，基于准备好的dom，初始化echarts实例
 var option = {
   
	// 只放核心部分配置
   xAxis: [
     {
   
       //设置类别
       type