vue中tab栏切换echarts

<template>
  <div>
    <div class="topBox">
      <div class="top">
        <div class="title">供应商统计div>
        <el-date-picker v-model="value" type="year" placeholder="选择年份">
        el-date-picker>
      div>
      <div id="receive">div>
    div>

    <div class="bottomBox">
       <div class="top">
          <ul class="tabs">
             <li v-for="(item,index) in tabs" :key="index" :class="{active:tabIndex==index}" @click="btn(index)">{{item}}li>  
          ul>
                  <el-date-picker v-model="value" type="year" placeholder="选择年份">
        el-date-picker>
       div>
       <div id="consumable" ref="consumable" v-show="tabIndex==0">div>
       <div id="reagent" ref="reagent" v-show="tabIndex==1">div>
    div>
  div>
template>
 
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      value: "",
      tabs:[
         '耗材领用量',
         '试剂领用量',
      ],     
      tabIndex:0,
    };
  },  

  methods: {
    //供应商统计
    getReceive() {
      var options = {
        tooltip: {
          trigger: "item", //去掉背景  、、axis加上背景
          axisPointer: {
            show: false,
            type: "shadow",
            crossStyle: {
              color: "#999",
            },
          },
        },

        xAxis: {
          type: "category",
          data: [
            "01月",
            "02月",
            "03月",
            "04月",
            "05月",
            "06月",
            "07月",
            "08月",
            "09月",
            "10月",
            "11月",
            "12月",
          ],
          axisLine: {
            lineStyle: {
              color: "#A5AFB8",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              //网格
              color: ["#F4F7FB"],
              width: 1,
              type: "solid",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#A5AFB8",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              //网格
              color: ["#F4F7FB"],
              width: 1,
              type: "solid",
            },
          },
        },
        series: [
          {
            data: [
              820,
              932,
              901,
              934,
              1290,
              1330,
              1320,
              820,
              932,
              901,
              934,
              1290,
            ],
            type: "bar",
            barWidth: 26.7, //柱图宽度
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //柱状图颜色
              //渐变色写法
              {
                offset: 0,
                color: "rgba(69,182,247)",
              },
              {
                offset: 1,
                color: "rgba(52,205,251)",
              },
            ]),
          },
        ],
      };

      let receive = document.querySelector("#receive");
      let myCharts = echarts.init(receive);
      myCharts.clear();//清除echarts实例
      myCharts.setOption(options);
    },


    //切换tab
    btn(index){
      this.tabIndex=index;   //配合v-show切换
      this.$nextTick(()=>{   //关键部分
          echarts.init(this.$refs.consumable).resize();
          echarts.init(this.$refs.reagent).resize();
      })

    },


    //获取耗材
          getConsumable() {
      var options = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "01月",
            "02月",
            "03月",
            "04月",
            "05月",
            "06月",
            "07月",
            "08月",
            "09月",
            "10月",
            "11月",
            "12月",
          ],
          axisLine: {
            lineStyle: {
              color: "#A5AFB8",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              //网格
              color: ["#F4F7FB"],
              width: 1,
              type: "solid",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#A5AFB8",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              //网格
              color: ["#F4F7FB"],
              width: 1,
              type: "solid",
            },
          },
        },
        series: [
          {
            data: [
              820,
              932,
              901,
              934,
              1290,
              1330,
              1320,
              820,
              932,
              901,
              934,
              1290,
            ],
            type: "line",
            symbol: "none", //去掉点
            areaStyle: {},
            smooth: true, //true为曲线
            areaStyle: {
              opacity: 0.9,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(243,137,142)",
                },
                {
                  offset: 1,
                  color: "rgba(237,162,81)",
                },
              ]),
            },
            itemStyle: {
              normal: {
                //   color:'#fc8a0f', //折点颜色
                lineStyle: {
                  color: "#F3898E", //折线颜色
                },
              },
            },
          },
        ],
      };
      
      let consumable =this.$refs.consumable;
              let myCharts = echarts.init(consumable);
              myCharts.setOption(options);
      

    },

    //获取试剂
        getReagent() {
      var options = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "01月",
            "02月",
            "03月",
            "04月",
            "05月",
            "06月",
            "07月",
            "08月",
            "09月",
            "10月",
            "11月",
            "12月",
          ],
          axisLine: {
            lineStyle: {
              color: "#A5AFB8",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              //网格
              color: ["#F4F7FB"],
              width: 1,
              type: "solid",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#A5AFB8",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              //网格
              color: ["#F4F7FB"],
              width: 1,
              type: "solid",
            },
          },
        },
        series: [
          {
            data: [
              820,
              932,
              901,
              934,
              1290,
              1330,
              1320,
              820,
              932,
              901,
              934,
              1290,
            ],
            type: "line",
            symbol: "none", //去掉点
            areaStyle: {},
            smooth: true, //true为曲线
            areaStyle: {
              opacity: 0.9,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(156,80,245)",
                },
                {
                  offset: 1,
                  color: "rgba(110,152,250)",
                },
              ]),
            },
            itemStyle: {
              normal: {
                //   color:'#fc8a0f', //折点颜色
                lineStyle: {
                  color: "#9D50F6", //折线颜色
                },
              },
            },
          },
        ],
      };

      let reagent =this.$refs.reagent;
            let myCharts = echarts.init(reagent);
      myCharts.setOption(options);  
      

    },


  },

  created() {},

  mounted() {
    this.getReceive();
    this.getConsumable();
    this.getReagent()
  },

  components: {},
};
script>
<style lang="scss" scoped>
.topBox,.bottomBox{
  width: 1598px;
  height: 421px;
  background: #FFFFFF;
  border: 1px solid #E6EBF5;
  border-radius: 2px;
  margin: 11px 37px 9px 32px;
}
.top {
  height: 51px;
  line-height: 51px;
  display: flex;
  padding-left: 17px;
  .title {
    margin-right: 43px;
    color: #000000;
    font-size: 14px;
  }
}
#receive,#consumable,#reagent{
  height: 369px;
}
::v-deep {
  canvas {
    transform: scale(1.17, 1);
    position: relative !important;
    left: 20px !important;
  }
}
.tabs{
   width: 182px;
   height: 30px;
   line-height: 30px;
   display: flex;
   justify-content: space-between;
   font-size: 14px;
   margin-right: 43px;
   padding-left: 0px;
   li{
     cursor: pointer;
     color: #000;
   }
}
.active{
   color: #1890FF!important;
   border-bottom: 2px solid #1890FF;
}
style>