echarts 根据选择时段来动态渲染折线图和统计

接口返回数据：

[{"TypeName":"费用1","x_data":[0,0,0,0,0.0100,0,0],"total":0.0100},{"TypeName":"费用2","x_data":[0,0,0,0,0,0,0],"total":0},{"TypeName":"费用3","x_data":[0,0,0,0,0,0,0],"total":0},{"y_time":["2021-07-02","2021-07-03","2021-07-04","2021-07-05","2021-07-06","2021-07-07","2021-07-08"]}]

页面效果：

子组件mutiLine ：

<template>
  <div class="hello">
    <div id="myCharts" style="width:50.1%;height: 340px;float: left;margin: 0.5rem 0.5rem 0 0;"></div>
    <div id="mytwoCharts" style="width:49%;height: 340px;float: left;margin: 0.5rem 0.2rem 0 0;"></div>
    <div id="BINCharts" style="width:48.9%;height: 320px;float: right;margin-top: 2rem;"></div>
    <div id="mythreeCharts" style="width:50.2%;height: 340px;float: left;margin-top: 0.5rem;"></div>
  </div>
</template>


<script>
import * as echarts from 'echarts';
export default {
     
  name: 'mutiLine',
  data(){
     
    return {
     
      series: [],
      legnData: [],
      bin_series:[],
      interval: [],//为了进行分割x轴
    }
  },
  props:{
     
    lineData:Array,
    lineTime:Array,
  },
   //折线数据通过变量传递
  watch: {
     
    lineData: {
     
      deep: true,
      handler(val) {
     
        if (val) {
     
          setTimeout(this.initEcharts(), 100);
          setTimeout(this.inittwoEcharts(), 100);
          setTimeout(this.initthreeEcharts(), 100);
          setTimeout(this.BINinitEcharts(), 100);
        }
      }
    },
  },
  mounted () {
     
    this.getZheData();
    this.initEcharts();
    this.inittwoEcharts();
    this.initthreeEcharts();
    this.BINinitEcharts();

  },
  methods: {
     


    //循环存储数据
    getZheData(){
     
      for(let i = 0;i < this.lineData.length;i++){
     
        this.interval.push(this.lineData[i].x_data)
        this.legnData.push(this.lineData[i].TypeName)
        this.bin_series.push({
     
          value:this.lineData[i].total,
          name:this.lineData[i].TypeName,
        })
        this.series.push({
     
          name: this.lineData[i].TypeName,
          data: this.lineData[i].x_data,
          type: 'line',
          smooth: true,
          itemStyle: {
     
            //则线图每个点的样式
            borderWidth: 10,
          },
        })
      }
    },

    //折线图1
    initEcharts: function () {
     
      const Charts = document.getElementById('myCharts');//getDom
      const myCharts = echarts.init(Charts);// add
      let series = [];
      let legnData = [