angular echarts数据预加载模拟websocket加载数据实现3分钟重绘特效

weixin_43970162

于 2021-03-31 17:03:48 发布

阅读量202

点赞数

分类专栏： it 前端 web 文章标签： angular echarts javascript typescript

本文链接：https://blog.csdn.net/weixin_43970162/article/details/115355070

版权

前端同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

web

9 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

angular echarts数据预加载模拟websocket加载数据实现3分钟重绘特效

export class DemoComponent implements OnInit {
  data = [];
  chartOption: any;
  chart: any;![在这里插入图片描述](https://img-blog.csdnimg.cn/20210331165421430.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDE2Mg==,size_16,color_FFFFFF,t_70#pic_center)

  now = new Date();
  constructor(private datePipe: DatePipe) {}

  ngOnInit() {
    this.data = this.getInitData();
    this.getData();
  }
  getData() {
    let index = 1;
    setInterval(() => {
      const lastTime = this.datePipe.transform(this.data[this.data.length - 1][0], 'HH:mm:ss');
      const lastHour = -(-(lastTime.split(':')[0]));
      const lastMin = -(-(lastTime.split(':')[1]));
      const lastYear = this.now.getFullYear();
      const lastMonth = this.now.getMonth();
      const lastDay = this.now.getDate();
      if (new Date().getTime() >= new Date(lastYear, lastMonth, lastDay, lastHour, lastMin, 0).getTime()) {//如果最新数据超过当前数据源最后一条数据的时间，则重绘图表
        this.data = [];
        this.chart.clear();
        this.data = this.getInitData();
        index = 1;
        return;
      }
      this.data.splice(index, 0, [new Date(), (Math.random() * 100).toFixed(2)]);
        this.refresh();
      index++;
    }, 1000);
  }
  getInitData() {//获取初始状态值，预加载2分钟后
    return [
      [new Date(new Date().setSeconds(0)), null],
      [new Date(new Date(new Date(new Date().setSeconds(0))).getTime() + 60 * 1000), null],
      [new Date(new Date(new Date(new Date().setSeconds(0))).getTime() + 60 * 1000 * 2), null]
    ];
  }
  refresh() {//刷新图标
    this.chartOption = {
      xAxis: {
        type: 'time',
        boundaryGap: false,
        axisLabel: {
          color: '#fff'
        },
        formatter: (param) => {
          console.log(param)
          // return this.
        }
      },
      yAxis: {
        type: 'value',
        color: '#fff'
      },
      series: [{
        type: 'line',
        lineStyle: {
          color: '#5470C6',
          width: 1
        },
        data: this.data
      }]
    };
  }
  onChartInit(eve) {
    this.chart = eve;
  }
}

```![在这里插入图片描述](https://img-blog.csdnimg.cn/2021033116572658.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDE2Mg==,size_16,color_FFFFFF,t_70#pic_center)数据实时加载，当数据刷新到16:55时，echarts重绘X轴时间刷新重新计算，效果比较简陋，如有需要自己稍稍修饰一下，另外我不知道怎么上传视频效果所以就只能这样了，希望可以帮到大家