专栏首页前端之攻略Element Tabs 标签页 展示Echart 并随窗口变化自适应

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • threejs 场景切换 优化性能

    是实现2个场景的定时切换,由于是用在大屏系统,需要浏览器一直能正常运行,不能运行一段时间卡死

    tianyawhl
  • .glb格式的模型怎么在three.js中展示

    3D软件中导出的格式一般有.obj 和.glb ,下面是blender 2.8.2 生成模型并在three.js中展示的流程

    tianyawhl
  • vue 中使用threejs

    tianyawhl
  • Openlayers2卷帘功能的实现

    在WebGIS开发中,经常会有用户提需求,要实现卷帘功能,卷帘功能主要是实现两张图之间的对比。在前文中,讲到了openlayers3以及Arcgis for j...

    lzugis
  • 【译】理解JavaScript中的This,Bind,Call和Apply

    this关键词在JavaScript中是个很重要的概念,也是一个对初学者和学习其他语言的人来说晦涩难懂。在JavaScript中,this是一个对象的引用。th...

    嘉明
  • 实现小球在弹射前的拉伸特效和动态障碍物特效

    当前我们实现小球弹射时,会先用鼠标点击小球,然后移动鼠标,当松开鼠标时,小球会弹射向鼠标松开的位置。我们按住小球的时间越长,小球弹射的力度就越大,但有一个问题是...

    望月从良
  • 闪屏还可以这样玩

    对于多数应用来说,在进入APP的时候使用短暂的闪屏广告来吸引用户是很常见的一个场景。但随着这种模式的频繁应用,越来越多的用户会感到审美疲劳,甚至不看就跳过闪屏了...

    林焕彬
  • 确认过眼神,你是喜欢Stream的人

    摘要:在学习Node的过程中,Stream流是常用的东东,在了解怎么使用它的同时,我们应该要深入了解它的具体实现。今天的主要带大家来写一写可读流的具体实现,就过...

    用户2145235
  • Druid学习笔记(二) - 数据连接的获取

    我们在分析mybatis执行sql的时候,最终定位到数据库连接池上。当时分析到mybatis通过数据库连接池获取到链接,然后通过连接执行sql。

    程序员_备忘录
  • Flutter 入门指北之基础部件

    原文:https://www.jianshu.com/p/8ddb16902ce6

    陈宇明

扫码关注云+社区

领取腾讯云代金券