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

效果：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: 'time',
       interval: 900000, // 固定x轴时间间隔
       min: startTime,   // 开始时间
       max: endTime,   // 结束时间
       // x轴的字
       axisLabel: {
         show: true,
         showMinLabel: true,
         showMaxLabel: true,
         formatter: function (value, index) {
           // 格式化成时分秒
           let date = new Date(value);
           let nowHours = timeAdd0(date.getHours().toString());
           let nowMin = timeAdd0(date.getMinutes().toString());
           let nowSeconds = timeAdd0(date.getSeconds().toString());
           var texts = [nowHours,nowMin,nowSeconds];
           return texts.join(':');
         }
       }
     }
   ],
   //y轴样式
   yAxis: {
     type: 'value',
     boundaryGap: [0, '100%'],
     // 字体颜色
     axisLabel : {
       formatter: '{value}',
       textStyle: {
         color: '#303133'
       }
     },
   },
   //数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据
   series: [
     {
       name: '测试',
       type: 'line',
       showSymbol: false,
       hoverAnimation: false,
       data: data
     }
   ],
 }
 myChart.setOption(option);



// 读秒更新图表
var _self = this;
this.timer = setInterval(function () {
   startTime = startTime + 1000;
   endTime = endTime + 1000;
   myChart.setOption({ 
    series: [{
      data: data
    }],
    xAxis: [{
      min: startTime,
       max: endTime,
     }]
   });
 }, 1000);

// 关闭计时器
clearInterval(this.timer);

点击切换趋势图查看时间范围的按钮，只需要切换x轴的最大最小值