mpvue中tab切换echarts显示问题

//template  
<ul class="tab" @click="current" :key="id">
      <li @click="cur=0" :class="{active:cur==0}">1</li>
      <li @click="cur=1" :class="{active:cur==1}">2</li>
      <li @click="cur=2" :class="{active:cur==2}">3</li>
    </ul>
    <div v-show="cur===0" >
      <div class="week" v-if="cur===0">
        <mpvue-echarts :echarts="echarts" :onInit="ecBarInit0" canvasId="bar0" />
      </div>
    </div>
<div v-show="cur===1" >
      <div class="week" v-if="cur===1">
        <mpvue-echarts :echarts="echarts" :onInit="ecBarInit1" canvasId="bar1" />
      </div>
    </div>
<div v-show="cur===2" >
      <div class="week" v-if="cur===2">
        <mpvue-echarts :echarts="echarts" :onInit="ecBarInit2" canvasId="bar2" />
      </div>
    </div>
//js
let echarts = require("../../../static/echarts.min");
import mpvueEcharts from "mpvue-echarts";
function getBarOption() {
  return {
    title: [
      {
        textAlign: "center",
        text: "balal",
        subtext: "2400",
        left: "18%",
        textStyle: {
          fontSize: 14,
          color: "black"
        },
        subtextStyle: {
          fontSize: 16,
          fontWeight: "bold",
          color: "black"
        }
      },
     
    ],
    //color:[“red”,"green"]饼图自定义颜色
    tooltip: {
      trigger: "axis"
    },
    legend: {
      icon: "circle",
      data: ["balal",等等],
      bottom: 10,
      left: "center"
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "20%",
      top: "21%",
      containLabel: true
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        name: "balal",
        type: "line",
        color: "#1296db", // 折线图自定义颜色
        stack: "总量",
        data: [120, 132, 101, 134, 90, 230, 210]
      }
    ]
  };
} 注释x3
export default {
  data() {
    return {
      echarts,
      cur: 0, //默认选中第一个tab
      value:'',
      ecBarInit: function(canvas, width, height) {
        barChart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(barChart);
        barChart.setOption(getBarOption());
        return barChart;
      }, 注释 x3
    }
  },
    methods: {
    current(e) {
      this.value = e.target.dataset.eventid;//获取ul li下标
    },
}
//css
ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tab {
  display: flex;
  border-bottom: 2px solid #ddd;
}
.tab li {
  flex: 1;
  font-size: 14px;
  text-align: center;
  padding: 10px 0;
}
.tab li.active {
  color: red;
  border-bottom: 3px solid red;
}    
 

 

posted @ 2020-05-21 16:17  茗涵  阅读(159)  评论(0编辑  收藏  举报