关于在tab中使用echarts大小为0的问题

小弟最近写一个程序时需要实现一个在tab栏中切换不同的echarts图标的显示问题:在tab栏切换后再切换回来其父盒子div有大小,但是echarts大小为0x0;
同时自己再测了一下,当我跳转到没有echarts的页面再跳转回有echarts的后echarts能正常显示,但是从一个有echarts页面A跳到另一个有echarts的页面B第一次可以成功,但再从B跳会A时,A中其它元素可以正常显示,但是echarts就是显示不出来,已经卡了好几天了,网上的方法也试了一下不知道是不是自己试的方法对不对,拜托各位大神帮忙看看谢谢!
图片说明
图片说明

实现过程是用把echarts放在不同的div中,通过tab按下时捕获的值给current从而让相应的div中的图表显示出来:

 <div  v-if="current === 'month'">      
    <div class="wrap">
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" />
    </div>
    <div class="wrap">   
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" />
    </div>
    <div class="wrap1">
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" />
    </div>
    </div>

    <div v-if="current === 'quarter'">
    <div class="wrap">
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" />
    </div>
    <div class="wrap">   
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" />
    </div>
    <div class="wrap1">
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" />
    </div>
    </div>

当按下了相应的tab后,会调用相应的获取数据函数:

     // tab栏切换
      handleChangeTabbar(e) {
        this.current = e.target.key;
        console.log("按下了tab栏");
        console.log(this.current);
        if(this.current=="seven"){this.getChartData(7);}
        else if(this.current == "month"){ this.getChartData(30);}
        else if(this.current == "quarter"){this.getChartData(90)}
        else if(this.current == "halfyear"){this.getChartData(180)}
        else if(this.current == "year"){this.getChartData(365)}
      }

在获取数据函数中最后调用了图表的初始化函数init:

  async getChartData(typeChange) {
        const body = {
          stationId: this.stationId,
          "access-token": this.accessToken,
          type:typeChange
        }
        console.log(body)
        const resp = await post('/station/data_statistics', body);
        console.log(resp)
        const { code, data } = resp;
        let barXAxisData = [];
        let barSeriesData = [];
        let barAccessXAxisData = [];
        let barAccessSeriesData = [];
        let lineXAxisData = [];
        let lineSeriesData = [];
        let lineAccessSeriesData = [];
        let lineTotalSeriesData = [];
        if (code === 200) {
          console.log(data)
          let axleTotalNum = 0;
          let axleAccessNum = 0;
          let totalNum = 0;
          let accessNum = 0;
          // 遍历各车轴总车数
          for(var k = 0, length = data.axleTotalNum.length; k < length; k++){
             // 分别将对象中数据提到数组中,然后轴数给x轴,将总数给y轴
            barXAxisData.push(data.axleTotalNum[k].axle)
            barSeriesData.push(data.axleTotalNum[k].num)
            // 把所有车轴的过车数加起来,在左上角显示过车总数
            axleTotalNum = axleTotalNum + data.axleTotalNum[k].num
          }
          // 遍历各车轴超车数
          for(var k = 0, length = data.axleAccessNum.length; k < length; k++){
            barAccessXAxisData.push(data.axleAccessNum[k].axle)
            barAccessSeriesData.push(data.axleAccessNum[k].num)
            // 把所有车轴的超车数加起来,在右上角显示超车总数
            axleAccessNum = axleAccessNum + data.axleAccessNum[k].num
          }
          // 遍历7日中各日过车总数
          for(var k = 0, length = data.totalNum.length; k < length; k++){
            //把日期存进x轴的数组
            lineXAxisData.push(data.totalNum[k].day)
            // 把具体每日数目存进y轴的数组
            lineTotalSeriesData.push(data.totalNum[k].num)
             // 统计的是7日的过车总数,其实与上面的各轴车过车总数结果一样
            totalNum = totalNum + data.totalNum[k].num
          }
          // 遍历7日中各日超车总数
          for(var k = 0, length = data.excessNum.length; k < length; k++){
            console.log(k)
            // 只统计y轴数据即可,因为其与7日过车数在折线图中一起显示,上面已经有x轴
            lineAccessSeriesData.push(data.excessNum[k].num)
            accessNum = accessNum + data.excessNum[k].num
          }
          console.log(lineXAxisData,barSeriesData,barAccessXAxisData,barAccessSeriesData,lineXAxisData,lineSeriesData)
          // 把折线图中的两个y轴数组存到同一个数组中?
          lineSeriesData.push(lineAccessSeriesData, lineTotalSeriesData);
          console.log(lineXAxisData)
           // 其实这4个变量是两两相等的
          this.accessNum = accessNum;
          this.totalNum = totalNum;
          this.axleTotalNum = axleTotalNum;
          this.axleAccessNum = axleAccessNum;
        }
        console.log(lineXAxisData, lineSeriesData)
        this.initBarChart(barXAxisData, barSeriesData,typeChange)
        this.initAccessBarChart(barAccessXAxisData, barAccessSeriesData,typeChange)
        this.initLineChart(lineXAxisData, lineSeriesData,typeChange)
      },

图表初始函数如下,其中写明了一些图表基础设置并进行setoption:

 initBarChart(xAxisData, seriesData,typeChange) {
       if(typeChange==7){
          this.barOption = {
          title: {
            text: "近七日过车车型",
            textStyle: {
              fontSize: 14
            },
            left: 'center'
          },
          legend: {
            right: '14',
            data: [{name:'车轴数'}]
          },
          grid: {
            left: 10,
            right: 20,
            bottom: 15,
            top: 30,
            containLabel: true
          },
          color: ['#2d8cf0', '#19be6b', '#ff9900'],
          xAxis: {
            type: 'category',
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          },
          series:[{
            type: 'bar',
            name: '车轴数',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: seriesData
          }]
        } 
       } else if(typeChange==30){
          this.barOption = {
          title: {
            text: "近一月过车车型",
            textStyle: {
              fontSize: 14
            },
            left: 'center'
          },
          legend: {
            right: '14',
            data: [{name:'车轴数'}]
          },
          grid: {
            left: 10,
            right: 20,
            bottom: 15,
            top: 30,
            containLabel: true
          },
          color: ['#2d8cf0', '#19be6b', '#ff9900'],
          xAxis: {
            type: 'category',
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          },
          series:[{
            type: 'bar',
            name: '车轴数',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: seriesData
          }]
        } 
       }else if(typeChange==90){
        this.barOption = {
          title: {
            text: "近一季过车车型",
            textStyle: {
              fontSize: 14
            },
            left: 'center'
          },
          legend: {
            right: '14',
            data: [{name:'车轴数'}]
          },
          grid: {
            left: 10,
            right: 20,
            bottom: 15,
            top: 30,
            containLabel: true
          },
          color: ['#2d8cf0', '#19be6b', '#ff9900'],
          xAxis: {
            type: 'category',
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          },
          series:[{
            type: 'bar',
            name: '车轴数',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: seriesData
          }]
        }
       }else if(typeChange==180){
        this.barOption = {
          title: {
            text: "近半年过车车型",
            textStyle: {
              fontSize: 14
            },
            left: 'center'
          },
          legend: {
            right: '14',
            data: [{name:'车轴数'}]
          },
          grid: {
            left: 10,
            right: 20,
            bottom: 15,
            top: 30,
            containLabel: true
          },
          color: ['#2d8cf0', '#19be6b', '#ff9900'],
          xAxis: {
            type: 'category',
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          },
          series:[{
            type: 'bar',
            name: '车轴数',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: seriesData
          }]
        }
       }
        this.$refs.barCharts.init()
      },

最后再于图表的html部分中绑定了下面函数进行渲染:

 handleBarInit (canvas, width, height) {
         console.log("打印表2宽高");
         console.log(this.wdith);
         console.log(this.height);
        barChart = echarts.init(canvas, null, {
          width: width,
          height: height,
        })
        canvas.setChart(barChart)
        barChart.setOption(this.barOption,true)
        return barChart
      },

最后附上该页面完整代码,请大家帮忙看看谢谢~

<template>
  <div class="historyContainer">


    <div v-if="current === 'seven'">
    <i-row>
      <i-col span="8" offset="2" i-class="col-class">
        <div class="headerCard">
          <h4>近七日过车数:</h4>
          <p>{{totalNum}}</p>
        </div>
      </i-col>
      <i-col span="8" offset="4" i-class="col-class">
        <div class="headerCard">
          <h4>近七日超车数:</h4>
          <p>{{accessNum}}</p>
        </div>
      </i-col>
    </i-row>
    <div class="wrap">
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" />
    </div>
    <div class="wrap">   
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" />
    </div>
    <div class="wrap1">
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" />
    </div>
    </div>



    <div  v-if="current === 'month'">      
     <i-row>
      <i-col span="8" offset="2" i-class="col-class">
        <div class="headerCard">
          <h4>近一月过车数:</h4>
          <p>{{totalNum}}</p>
        </div>
      </i-col>
      <i-col span="8" offset="4" i-class="col-class">
        <div class="headerCard">
          <h4>近一月超车数:</h4>
          <p>{{accessNum}}</p>
        </div>
      </i-col>
    </i-row>
    <div class="wrap">
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" />
    </div>
    <div class="wrap">   
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" />
    </div>
    <div class="wrap1">
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" />
    </div>
    </div>

    <div v-if="current === 'quarter'">
    <i-row>
      <i-col span="8" offset="2" i-class="col-class">
        <div class="headerCard">
          <h4>近一季过车数:</h4>
          <p>{{totalNum}}</p>
        </div>
      </i-col>
      <i-col span="8" offset="4" i-class="col-class">
        <div class="headerCard">
          <h4>近一季超车数:</h4>
          <p>{{accessNum}}</p>
        </div>
      </i-col>
    </i-row>
    <div class="wrap">
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" />
    </div>
    <div class="wrap">   
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" />
    </div>
    <div class="wrap1">
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" />
    </div>
    </div>

    <div v-if="current === 'halfyear'">
         <i-row>
      <i-col span="8" offset="2" i-class="col-class">
        <div class="headerCard">
          <h4>近半年过车数:</h4>
          <p>{{totalNum}}</p>
        </div>
      </i-col>
      <i-col span="8" offset="4" i-class="col-class">
        <div class="headerCard">
          <h4>近半年超车数:</h4>
          <p>{{accessNum}}</p>
        </div>
      </i-col>
    </i-row>
    <div class="wrap">
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" />
    </div>
    <div class="wrap">   
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" />
    </div>
    <div class="wrap1">
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" />
    </div>
    </div>

    <div v-if="current === 'year'">
      这是一年
    </div>



    <i-tab-bar fixed="true" :current="current" @change="handleChangeTabbar">
      <i-tab-bar-item key="seven" icon="computer" current-icon="computer_fill" title="近一周"></i-tab-bar-item>
      <i-tab-bar-item key="month" icon="dynamic" current-icon="dynamic_fill" title="近一月"></i-tab-bar-item>
      <i-tab-bar-item key="quarter" icon="addressbook" current-icon="addressbook_fill" title="近一季"></i-tab-bar-item>
      <i-tab-bar-item key="halfyear" icon="setup" current-icon="setup_fill" title="近半年"></i-tab-bar-item>
      <i-tab-bar-item key="year" icon="mine" current-icon="mine_fill" title="近一年"></i-tab-bar-item>
    </i-tab-bar>

  </div>
</template>

<script>
  import echarts from 'echarts'
  import mpvueEcharts from 'mpvue-echarts';
  import { post } from '@/api/request.js';

  let barChart, accessBarChart, lineChart;

  export default {
    onLoad(options) {
      const {
        stationId,
        accessToken
      } = options;
      this.stationId = stationId;
      this.accessToken = accessToken;
    },
    data() {
      return {
        current:'seven',
        stationId: '',
        accessToken: '',
        echarts,
        totalNum: 0,
        accessNum: 0,
        axleTotalNum: 0,
        axleAccessNum: 0,
        // type:7,//暂时默认七天
        barOption: null,
        accessBarOption: null,
        lineOption: null
      }
    },
    components: {
      mpvueEcharts
    },
    mounted() {
       this.getChartData(7);
    },
    methods: {
      initBarChart(xAxisData, seriesData,typeChange) {
       if(typeChange==7){
          this.barOption = {
          title: {
            text: "近七日过车车型",
            textStyle: {
              fontSize: 14
            },
            left: 'center'
          },
          legend: {
            right: '14',
            data: [{name:'车轴数'}]
          },
          grid: {
            left: 10,
            right: 20,
            bottom: 15,
            top: 30,
            containLabel: true
          },
          color: ['#2d8cf0', '#19be6b', '#ff9900'],
          xAxis: {
            type: 'category',
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          },
          series:[{
            type: 'bar',
            name: '车轴数',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: seriesData
          }]
        } 
       } else if(typeChange==30){
          this.barOption = {
          title: {
            text: "近一月过车车型",
            textStyle: {
              fontSize: 14
            },
            left: 'center'
          },
          legend: {
            right: '14',
            data: [{name:'车轴数'}]
          },
          grid: {
            left: 10,
            right: 20,
            bottom: 15,
            top: 30,
            containLabel: true
          },
          color: ['#2d8cf0', '#19be6b', '#ff9900'],
          xAxis: {
            type: 'category',
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          },
          series:[{
            type: 'bar',
            name: '车轴数',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: seriesData
          }]
        } 
       }else if(typeChange==90){
        this.barOption = {
          title: {
            text: "近一季过车车型",
            textStyle: {
              fontSize: 14
            },
            left: 'center'
          },
          legend: {
            right: '14',
            data: [{name:'车轴数'}]
          },
          grid: {
            left: 10,
            right: 20,
            bottom: 15,
            top: 30,
            containLabel: true
          },
          color: ['#2d8cf0', '#19be6b', '#ff9900'],
          xAxis: {
            type: 'category',
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          },
          series:[{
            type: 'bar',
            name: '车轴数',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: seriesData
          }]
        }
       }else if(typeChange==180){
        this.barOption = {
          title: {
            text: "近半年过车车型",
            textStyle: {
              fontSize: 14
            },
            left: 'center'
          },
          legend: {
            right: '14',
            data: [{name:'车轴数'}]
          },
          grid: {
            left: 10,
            right: 20,
            bottom: 15,
            top: 30,
            containLabel: true
          },
          color: ['#2d8cf0', '#19be6b', '#ff9900'],
          xAxis: {
            type: 'category',
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          },
          series:[{
            type: 'bar',
            name: '车轴数',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: seriesData
          }]
        }
       }
        this.$refs.barCharts.init()
      },
      handleBarInit (canvas, width, height) {
         console.log("打印表2宽高");
         console.log(this.wdith);
         console.log(this.height);
        barChart = echarts.init(canvas, null, {
          width: width,
          height: height,
        })
        canvas.setChart(barChart)
        barChart.setOption(this.barOption,true)
        return barChart
      },
      initAccessBarChart(xAxisData, seriesData,typeChange) {
        if(typeChange==7){
         this.accessBarOption = {
          title: {
            text: "近七日超车车型",
            textStyle: {
              fontSize: 14
            },
            left: 'center'
          },
          legend: {
            right: '14',
            data: [{name:'车轴数'}]
          },
          grid: {
            left: 10,
            right: 20,
            bottom: 15,
            top: 30,
            containLabel: true
          },
          color: ['#5cadff', '#19be6b', '#ff9900'],
          xAxis: {
            type: 'category',
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          },
          series:[{
            type: 'bar',
            name: '车轴数',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: seriesData
          }]
        } 
        } else if(typeChange==30){
          this.accessBarOption = {
          title: {
            text: "近一月超车车型",
            textStyle: {
              fontSize: 14
            },
            left: 'center'
          },
          legend: {
            right: '14',
            data: [{name:'车轴数'}]
          },
          grid: {
            left: 10,
            right: 20,
            bottom: 15,
            top: 30,
            containLabel: true
          },
          color: ['#5cadff', '#19be6b', '#ff9900'],
          xAxis: {
            type: 'category',
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          },
          series:[{
            type: 'bar',
            name: '车轴数',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: seriesData
          }]
        } 
        }else if(typeChange==90){
        this.accessBarOption = {
          title: {
            text: "近一季超车车型",
            textStyle: {
              fontSize: 14
            },
            left: 'center'
          },
          legend: {
            right: '14',
            data: [{name:'车轴数'}]
          },
          grid: {
            left: 10,
            right: 20,
            bottom: 15,
            top: 30,
            containLabel: true
          },
          color: ['#5cadff', '#19be6b', '#ff9900'],
          xAxis: {
            type: 'category',
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          },
          series:[{
            type: 'bar',
            name: '车轴数',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: seriesData
          }]
        } 
        }else if(typeChange==180){
        this.accessBarOption = {
          title: {
            text: "近半年超车车型",
            textStyle: {
              fontSize: 14
            },
            left: 'center'
          },
          legend: {
            right: '14',
            data: [{name:'车轴数'}]
          },
          grid: {
            left: 10,
            right: 20,
            bottom: 15,
            top: 30,
            containLabel: true
          },
          color: ['#5cadff', '#19be6b', '#ff9900'],
          xAxis: {
            type: 'category',
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          },
          series:[{
            type: 'bar',
            name: '车轴数',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: seriesData
          }]
        }
        }
        this.$refs.accessBarCharts.init()
      },
      handleAccessBarInit (canvas, width, height) {
         console.log("打印表1宽高");
         console.log(this.wdith);
         console.log(this.height);
        accessBarChart = echarts.init(canvas, null, {
          width: width,
          height: height
        })
        canvas.setChart(accessBarChart)
        accessBarChart.setOption(this.accessBarOption,true)
        return accessBarChart
      },
      initLineChart(xAxisData, seriesData,typeChange) {
        if(typeChange==7){
            this.lineOption = {
          title: {
            text: "近7日车流量和超车数",
            textStyle: {
              fontSize: 14
            },
            left: 'center'
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            formatter: '日期:{b}\n{a0}: {c1}\n{a1}: {c0}'
          },
          legend: {
            right: '14',
            orient: 'vertical',
            data: [{name:'总数'},{name:"超载数"}]
          },
          grid: {
            left: 10,
            right: 20,
            bottom: 15,
            top: 50,
            containLabel: true
          },
          color: ['#5cadff', '#ff9900'],
          xAxis: {
            data: xAxisData,
            triggerEvent : true
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          },
          series:[{
            type: 'line',
            name: '超载数',
            data: seriesData[0]
          },{
            type: 'line',
            name: '总数',
            data: seriesData[1]
          }]
        } 
        } else if(typeChange==30){
          this.lineOption = {
          title: {
            text: "近一月车流量和超车数",
            textStyle: {
              fontSize: 14
            },
            left: 'center'
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            formatter: '日期:{b}\n{a0}: {c1}\n{a1}: {c0}'
          },
          legend: {
            right: '14',
            orient: 'vertical',
            data: [{name:'总数'},{name:"超载数"}]
          },
          grid: {
            left: 10,
            right: 20,
            bottom: 15,
            top: 50,
            containLabel: true
          },
          color: ['#5cadff', '#ff9900'],
          xAxis: {
            data: xAxisData,
            triggerEvent : true
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          },
          series:[{
            type: 'line',
            name: '超载数',
            data: seriesData[0]
          },{
            type: 'line',
            name: '总数',
            data: seriesData[1]
          }]
        } 
        } else if(typeChange==90){
          this.lineOption = {
          title: {
            text: "近一季车流量和超车数",
            textStyle: {
              fontSize: 14
            },
            left: 'center'
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            formatter: '日期:{b}\n{a0}: {c1}\n{a1}: {c0}'
          },
          legend: {
            right: '14',
            orient: 'vertical',
            data: [{name:'总数'},{name:"超载数"}]
          },
          grid: {
            left: 10,
            right: 20,
            bottom: 15,
            top: 50,
            containLabel: true
          },
          color: ['#5cadff', '#ff9900'],
          xAxis: {
            data: xAxisData,
            triggerEvent : true
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          },
          series:[{
            type: 'line',
            name: '超载数',
            data: seriesData[0]
          },{
            type: 'line',
            name: '总数',
            data: seriesData[1]
          }]
        } 
        } else if(typeChange==180){
          this.lineOption = {
          title: {
            text: "近半年车流量和超车数",
            textStyle: {
              fontSize: 14
            },
            left: 'center'
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            formatter: '日期:{b}\n{a0}: {c1}\n{a1}: {c0}'
          },
          legend: {
            right: '14',
            orient: 'vertical',
            data: [{name:'总数'},{name:"超载数"}]
          },
          grid: {
            left: 10,
            right: 20,
            bottom: 15,
            top: 50,
            containLabel: true
          },
          color: ['#5cadff', '#ff9900'],
          xAxis: {
            data: xAxisData,
            triggerEvent : true
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          },
          series:[{
            type: 'line',
            name: '超载数',
            data: seriesData[0]
          },{
            type: 'line',
            name: '总数',
            data: seriesData[1]
          }]
        } 
        }

        this.$refs.lineCharts.init()
      },
      handleLineInit (canvas, width, height) {
         console.log("打印表3宽高");
         console.log(this.wdith);
         console.log(this.height);
        lineChart = echarts.init(canvas, null, {
          width: width,
          height: height
        })
        canvas.setChart(lineChart)
        lineChart.setOption(this.lineOption,true)
        return lineChart
      },
      async getChartData(typeChange) {
        const body = {
          stationId: this.stationId,
          "access-token": this.accessToken,
          type:typeChange
        }
        console.log(body)
        const resp = await post('/station/data_statistics', body);
        console.log(resp)
        const { code, data } = resp;
        let barXAxisData = [];
        let barSeriesData = [];
        let barAccessXAxisData = [];
        let barAccessSeriesData = [];
        let lineXAxisData = [];
        let lineSeriesData = [];
        let lineAccessSeriesData = [];
        let lineTotalSeriesData = [];
        if (code === 200) {
          console.log(data)
          let axleTotalNum = 0;
          let axleAccessNum = 0;
          let totalNum = 0;
          let accessNum = 0;
          // 遍历各车轴总车数
          for(var k = 0, length = data.axleTotalNum.length; k < length; k++){
             // 分别将对象中数据提到数组中,然后轴数给x轴,将总数给y轴
            barXAxisData.push(data.axleTotalNum[k].axle)
            barSeriesData.push(data.axleTotalNum[k].num)
            // 把所有车轴的过车数加起来,在左上角显示过车总数
            axleTotalNum = axleTotalNum + data.axleTotalNum[k].num
          }
          // 遍历各车轴超车数
          for(var k = 0, length = data.axleAccessNum.length; k < length; k++){
            barAccessXAxisData.push(data.axleAccessNum[k].axle)
            barAccessSeriesData.push(data.axleAccessNum[k].num)
            // 把所有车轴的超车数加起来,在右上角显示超车总数
            axleAccessNum = axleAccessNum + data.axleAccessNum[k].num
          }
          // 遍历7日中各日过车总数
          for(var k = 0, length = data.totalNum.length; k < length; k++){
            //把日期存进x轴的数组
            lineXAxisData.push(data.totalNum[k].day)
            // 把具体每日数目存进y轴的数组
            lineTotalSeriesData.push(data.totalNum[k].num)
             // 统计的是7日的过车总数,其实与上面的各轴车过车总数结果一样
            totalNum = totalNum + data.totalNum[k].num
          }
          // 遍历7日中各日超车总数
          for(var k = 0, length = data.excessNum.length; k < length; k++){
            console.log(k)
            // 只统计y轴数据即可,因为其与7日过车数在折线图中一起显示,上面已经有x轴
            lineAccessSeriesData.push(data.excessNum[k].num)
            accessNum = accessNum + data.excessNum[k].num
          }
          console.log(lineXAxisData,barSeriesData,barAccessXAxisData,barAccessSeriesData,lineXAxisData,lineSeriesData)
          // 把折线图中的两个y轴数组存到同一个数组中?
          lineSeriesData.push(lineAccessSeriesData, lineTotalSeriesData);
          console.log(lineXAxisData)
           // 其实这4个变量是两两相等的
          this.accessNum = accessNum;
          this.totalNum = totalNum;
          this.axleTotalNum = axleTotalNum;
          this.axleAccessNum = axleAccessNum;
        }
        console.log(lineXAxisData, lineSeriesData)
        this.initBarChart(barXAxisData, barSeriesData,typeChange)
        this.initAccessBarChart(barAccessXAxisData, barAccessSeriesData,typeChange)
        this.initLineChart(lineXAxisData, lineSeriesData,typeChange)
      },

      // tab栏切换
      handleChangeTabbar(e) {
        this.current = e.target.key;
        console.log("按下了tab栏");
        console.log(this.current);
        if(this.current=="seven"){this.getChartData(7);}
        else if(this.current == "month"){ this.getChartData(30);}
        else if(this.current == "quarter"){this.getChartData(90)}
        else if(this.current == "halfyear"){this.getChartData(180)}
        else if(this.current == "year"){this.getChartData(365)}
      }


    }
  }
</script>

<style>
.historyContainer{
  width: 100%;
  height: 100%;
}
.headerCard{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 30px;
  border: 1px solid #ccc;
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 14px;
}
.wrap{
  margin-top: 20px;
  /* width:100%; */
  width: 380px;
  height: 400px;
}
.wrap1{
  margin-top: 20px;
  /* width:100%; */
  width: 380px;
  height: 400px;
  margin-bottom: 50px
}
</style>


Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐