vue中实现Echarts折线图多数据动态显示

可以复制搜索看看是否是想要的效果

https://gallery.echartsjs.com/editor.html?c=xtdeZMuQ4t

//SignalR

https://blog.csdn.net/weixin_42768220/article/details/107575940

也就是折线图1秒或者几秒获取一次数据（通过SignalR请求端口数据），当然请求数据库也是可以实现的，但是对于数据库性能也是特别消耗的，现在先看看动态的折线图是如何实现的吧
//==============================================================
子组件

<template>
  <div :class="className" :style="{height:height,width:width}" />//单独的组件渲染对于Echarts
</template>


data() {
    return {
    	chart: null,
    	Obj: {//定义的变量用来存储获取过来的数据
		        XData: [],
		        YData: []
		      }
    }
}
methods: {
	SetData(data) {
      // debugger;
      // console.log(data,'data')
      let me = this;
      me.$el.removeAttribute("_echarts_instance_");
      me.chart = echarts.init(me.$el, "macarons");
      if (!isEmpty(data)) {
        me.initChart(data);
      } else {
        let EmptyChartImg =
          '<img class="EmptyChartImg" src="' + me.isEmptyChartImg + '">';
          me.$el.innerHTML = EmptyChartImg;
      }
    },
    SetSeriesData(dataValue){
        let me = this; //在父组件中通过$ref讲获取的数据过来接收dataValue
        if (!this.chart) {//判断最开始如果没有渲染过折线，那么就需要对折线图初始化
          me.SetData(dataValue);
        }else{//否则再次获取过来的数据不需要重新渲染，直接push获取过来的值
          if(this.Obj.YData.length>20){
          this.Obj.XData.shift()
          this.Obj.YData.shift();
              
          }
          this.Obj.YData.push(dataValue.Value);

          this.Obj.XData.push(getTime(Math.round(new Date().getTime()/ 1000)));//获取当前的时间
          me.chart.setOption({//重新给data赋值
              series: [{
                  data: this.Obj.YData
              }],
              xAxis: [{
                  data: this.Obj.XData
              }],
          });
        }
    },
    initChart(dynamicData) {
      // debugger;//初始化
        let me = this;      
            this.Obj.XData.push(getTime(Math.round(new Date().getTime() / 1000)));
        if (!isEmpty(dynamicData.Value)) {
            this.Obj.YData.push(dynamicData.Value);
        }
      me.setOptions();//调用setOptions
    },  
    setOptions() {
        let me = this;      
        // 生成初始数据
      me.chart.setOption({//设置想要实现的样式
        title: {
          left: "center",
          text: "",
          textStyle: {
            fontWeight: 500,
            fontSize: "20"
          }
        },
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: "#57617B"
            }
          },
          data: this.Obj.XData
        },
        yAxis: {
          name: "ss",
          type: "value",
          splitArea: {
            show: false
          },
          axisTick: {
            show: false //隐藏X轴刻度
          }
        },
        series: [
          {
            name: "发送",
            type: "line",
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            data: this.Obj.YData
          }
        ]
      });
    },
}

function getTime() {
        var ts = arguments[0] || 0;
        var t, h, i, s,y,m,d;
        t = ts ? new Date(ts * 1000) : new Date();
        y = t.getFullYear();
        m = t.getMonth()+1;
        d = t.getDay();

        h = t.getHours();
        i = t.getMinutes();
        s = t.getSeconds();
        // 可根据需要在这里定义时间格式
        return y +'年'+m+'月'+d +'日'+ ' '+(h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s);
    }

//============================================================
父组件

<DynamicChart ref="DynamicChart"></DynamicChart>//在此组件中展示
<Signalr @SignalrData="SignalrData"></Signalr>//Signalr获取端口数据
SignalR获取的方法会在  https://blog.csdn.net/weixin_42768220/article/details/107575940  里阐述
<script>
import DynamicChart from '@/views/components/InsertManage/OPCUA/OPCUAHistory/DynamicChart'
import Signalr from '@/views/components/InsertManage/OPCUA/Signalr'
components:{
	DynamicChart,
	Signalr
}
methods:{
	SignalrData(data){
            this.$refs.DynamicChart.SetSeriesData(data);//将值传过去
        },
}
</script>

以上所实现的方法是通过SignalR获取数据传值，动态展示的方法，如果想要一直获取数据库的数据，来动态展示，也是可以实现的，就是需要通过setTimeout来实现，（setInterval实现的话可以的，缺点也很明显，破坏性比较强），用setTimeout循环调用（递归）就可以实现了，但是最好还是通过获取端口数据，后端也可以定时传值，也不用做循环。