Element Tabs 标签页 展示Echart 并随窗口变化自适应

主要难点

1、如何在一个div中展示不同的图表  （点击tab时为Chart组件赋值，并传给子组件，子组件监听数据变化并在 $nextTick 中重新绘制表格）

  watch: {
    "chart1Info.idName": {
      handler(newName, oldName) {
        console.log(newName);
        this.$nextTick(() => {
          this.drawLine();
        });
      }
    }
  },

2、窗口变化图表自适应（在图表组件中的 mounted钩子中监听窗口resize事件并执行图表的resize()方法 ）

  mounted() {
    console.log("mounted");
    this.drawLine();
    var _this = this;
    window.addEventListener("resize", function() {
      console.log("resize");
      console.log(_this);
      _this.myChart.resize();
    });
  },

完整代码

Tabs.vue

<template>
  <div>
    <el-tabs v-model="actveName" @tab-click="handleClick">
      <el-tab-pane v-for="item in tabs" :key="item.name" :label="item.label" :name="item.name"></el-tab-pane>
    </el-tabs>
    <Chart :chart1Info="chart" height="300px"></Chart>
  </div>
</template>

<script>
import Chart from "@/components/Chart.vue";
export default {
  data() {
    return {
      actveName: "first",
      tabs: [
        { label: "用户管理1", name: "first" },
        { label: "配置管理", name: "second" },
        { label: "角色管理", name: "third" },
        { label: "角色管理1", name: "forth" }
      ],
      chart: {
        idName: "myChart1",
        xAxisData: ["AA", "B", "C", "D", "E", "F"]
      },
      chart2: {
        idName: "myChart2",
        xAxisData: ["AAs", "Bb", "Cc", "D", "E", "F"]
      }
    };
  },
  components: { Chart},
  methods: {
    handleClick(tab, event) {
      console.log(tab.name);
      switch (tab.name) {
        case "first":
          this.chart = {
            idName: "myChart1",
            xAxisData: ["AA", "B", "C", "D", "E", "F"]
          };
          break;
        case "second":          
          this.chart = {
            idName: "myChart2",
            xAxisData: ["AAs", "Bb", "Cc", "D", "E", "F"]
          };
          break;
      }
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},

  mounted() {}
};
</script>

Chart.vue

<template>
  <div>
    <div :id="chart1Info.idName" :style="{height:height}"></div>
  </div>
</template>

<script>

export default {
  name: "barChart",
  props: {
    chart1Info: Object,
    height: String
  },
  data() {
    return {
      myChart: null,
      max: 0,
      chartData: []
    };
  },
  watch: {
    "chart1Info.idName": {
      handler(newName, oldName) {
        console.log(newName);
        this.$nextTick(() => {
          this.drawLine();
        });
      }
    }
  },
  created() {
    console.log("created");
  },
  mounted() {
    console.log("mounted");
    this.drawLine();
    var _this = this;
    window.addEventListener("resize", function() {
      console.log("resize");
      console.log(_this);
      _this.myChart.resize();
    });
  },
  methods: {
    drawLine() {
     
      this.chartData = [5, 20, 36, 10, 10, 20];
      //this.max=55;
      let max = Math.ceil(Math.max.apply(null, this.chartData) * 1.35);
      this.max = max;
      console.log(max);
      this.myChart = this.$echarts.init(
        document.getElementById(this.chart1Info.idName),
        "shine"
      );
      this.myChart.setOption({
        //color:["green"],
        title: {
          text: "在VUE中使用Echarts1111"
          // textAlign: "left",
          // left: "center"
        },
        grid: {
          left: 100
        },
        tooltip: {},

        xAxis: {
          data: this.chart1Info.xAxisData
        },
        yAxis: {
          max: this.max
        },
        series: [
          {
            name: "销量",
            type: "bar",
            barMaxWidth: 30,
            data: this.chartData
          }
        ]
      });
    }
  }
};
</script>

 

来源：oschina

链接：https://my.oschina.net/u/2612473/blog/3189681