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

• 2020 年 3 月 9 日
• 筆記

主要难点

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>