在el-tab-pane选项卡中使用echarts

遇到的问题

1.使用el-tab-pane切换时,引入echarts组件,canvas100%的宽度会变为100px
2.数据不渲染

解决办法1

echarts组件加上v-if（必须是组件形式引入的），非组件看下面方法2

<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="首页" name="first">
         <div></div>
     </el-tab-pane>
     <el-tab-pane label="统计分析" name="second">
          <div class="echarts">
              <lineEchart
                v-if="activeName === 'second'"
                id="chart1"
                :dataList="barList"
              >
              </lineEchart>
          </div>
      </el-tab-pane>
   </el-tabs>
</template>

<script>
import lineEchart from '@/componentsSe/echarts'
export default {
  components: { lineEchart },
  data() {
    return {
      activeName: "first",
      barList: {
        text: "行为统计",
        yData: [200, 150, 100, 170, 130],
        xData: ["增加数量", "删除数量", "修改数量", "查询数量"],
        yUnit: "",
        xUnit: "",
        type: "bar"
      },
    }
  }
 }
</script>

解决办法2

直接使用echart而不是引入组件，用echarts的resize()

<el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane label="控制参数" name="conf">控制参数</el-tab-pane>
  <el-tab-pane label="实时曲线" name="echarts">
    <el-row :gutter="30">
      <el-col :span="12">
        <div ref="valveEchart" style="width: 100%;height:400px;"></div>
      </el-col>
      <el-col :span="12">
        <div ref="powerEchart" style="width: 100%;height:400px;"></div>
      </el-col>
    </el-row>
  </el-tab-pane>
</el-tabs>

mounted() {
  this.myChartMethod()
},
methods: {
  handleClick(tab) {
      // 重点在这步
      this.$nextTick(() => {
        echarts.getInstanceByDom(this.$refs.valveEchart).resize()
        echarts.getInstanceByDom(this.$refs.powerEchart).resize()
      })
  },
  myChartMethod() {
    // 初始化
    var valveEchart = echarts.init(this.$refs.valveEchart)
    var powerEchart = echarts.init(this.$refs.powerEchart)

    // 配置
    var valveOption = {}
    var powerOption = {}

    valveEchart.setOption(valveOption)
    powerEchart.setOption(powerOption)
  }
}

原文链接：https://www.jianshu.com/p/a698970c82dd