vue echarts5 动态数据增长

vue echarts5 数据动态变更

<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">今日网络流量 -- 共{{sumTraffic}}/MB</div> 
      <div class="sn-body"> 
        <div class="wrap-container"> 
          <div class="chartsdom" id="chart_networkTraffic"></div>
        </div> 
      </div> 
    </div>   
  </div>
</template>
<script>
var myChart;
var data= [];
var xData = [];
var dataCoord = [];
var option;
export default {
  name: "race",
  data() {
    
    return {
      timer: null,
      tableData: [],
      sumTraffic: ''
    }
  },
  props: {
    time: {
      type: Number,
      default: 60000
    },
  },
  mounted() {
    let that = this;
    myChart = echarts.init(document.getElementById('chart_networkTraffic'))
    option= {
      title: {
        show: false, // 是否显示title
        text: '暂无数据',
        left: 'center',
        top: 'center',
        textStyle: {
          color: '#f00',
          fontSize: 16,
          fontWeight: 400
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: xData,
        animationDuration: 1000,
        animationDurationUpdate: 1000,
        axisLabel: {
          color: '#999'
        },
        axisTick: {
          show: false
        }, 
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(78, 241, 246, 0.3)',
          }
        },
          
      },
      yAxis: {
        max: 'dataMax',
        axisLabel: {
          color: '#999'
        },
        axisTick: {
          show: false
        }, 
        splitLine: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(78, 241, 246, 0.3)'
          }
        }
      },
      grid: {
        top: 20,
        left: 20,
        right: 20,
        bottom: 20,
        containLabel: true
      },
      series: [{
        name: '网络流量',
        type: 'bar',
        stack: 'one',
        data: data,
        label: {
            show: true,
            position: 'top',
            valueAnimation: true,
            color: 'rgb(78, 241, 246)'
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 1, 
              color: 'rgba(0, 0, 0, 0)'
            },{
              offset: 0.5, 
              color: 'rgba(69, 194, 198,0.3)'
            },{
              offset: 0, 
              color: 'rgb(78, 241, 246)'
            }])
          }
        },
        barWidth: '10px',
        markPoint: {
          symbol: 'circle',
          itemStyle: {
            normal: {
              color: 'rgb(78, 241, 246)',
              shadowColor: 'rgb(78, 241, 246)',
              shadowBlur: 20
            }
          },
          symbolSize: [10, 10], // 容器大小
          symbolOffset: [0, 0], // 位置偏移
          data: dataCoord,
        }
      }],
      animationDuration: that.time,
      animationDurationUpdate: that.time,
      animationEasing: 'linear',
      animationEasingUpdate: 'linear'
    }
    if(this.timer){
      clearInterval(this.timer)
    }
    setTimeout(function() {
        that.getEchart()
    }, 0);
    this.timer=setInterval(function () {
        that.getEchart()
    }, that.time);

  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getEchart() {
      const u =…………;
      this.$axios.get(u,{headers:{'cloud-Auth-Token': ……}})
      .then((res)=>{
        if(res.data.code == 200 && res.data.data.siteTraffic.length){

          this.tableData =  res.data.data.siteTraffic;
          this.sumTraffic =  res.data.data.sumTraffic;
          this.success();
        }else{
          this.$message.error('暂无数据');
          this.false();
        };
      }).catch((err)=>{
          console.log(err);
          this.$message.error('暂无数据');
          this.false();
      });

      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    success() {
      var xData = [];var yData=[];
      let dataCoord = [];
      for(let i=0;i<this.tableData.length;i++){
        xData.push(this.tableData[i].name);
        yData.push(this.tableData[i].value);
        let obj1 = {};
        obj1.coord = [i, this.tableData[i].value];
        dataCoord.push(obj1);
      }
      option.xAxis.xData= xData;
      option.series[0].data = yData ;
      option.series[0].markPoint.data = dataCoord ;
      option.title.show = false;
      myChart.setOption(option);
    },
    false() {
      option.xAxis.xData= [];
      option.series[0].data = [] ;
      option.title.show = true;
      myChart.setOption(option);
    }
  }
};
</script>

<style lang="less" scoped>
.sn-container {
  .chartsdom {
    width: 100%;
    height: 95%;
  }
}
</style>