echarts——小曲的大屏

最新推荐文章于 2024-02-27 21:24:37 发布

小曲曲

最新推荐文章于 2024-02-27 21:24:37 发布

阅读量254

点赞数

分类专栏： echarts 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/weixin_43848576/article/details/122069395

版权

echarts 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

在这里插入图片描述

需求

自适应不同尺寸屏幕
引入6个图表组件
点击放大全屏

<template>
  <div class="home flex">
    <div class="col1">
      <div class="border area1">
        <div @click="open('/linepage')" class="open">↔</div>
        <line1></line1>
      </div>
      <div class="border area2">
        <div @click="open('/barpage')" class="open">↔</div>
        <bar></bar>
      </div>
    </div>
    <div class="col2">
      <div class="border area1">
        <div @click="open('/mappage')" class="open">↔</div>
        <map1></map1>
      </div>
      <div class="border area2">
        <div @click="open('/bar1page')" class="open">↔</div>
        <bar1></bar1>
      </div>
    </div>
    <div class="col3">
      <div class="border area1">
        <div @click="open('/piepage')" class="open">↔</div>
        <pie></pie>
      </div>
      <div class="border area2">
        <div @click="open('/looppiepage')" class="open">↔</div>
        <looppie></looppie>
      </div>
    </div>
  </div>
</template>

<script>
import bar from "@/components/bar";
import bar1 from "@/components/bar1";
import line1 from "@/components/line";
import pie from "@/components/pie";
import looppie from "@/components/looppie";
import map1 from "@/components/map";
export default {
  name: "Home",
  // eslint-disable-next-line vue/no-unused-components
  components: { bar, bar1, line1, pie, looppie, map1: map1 },
  methods: {
    open(path) {
      this.$router.push(path);
    },
  },
};
</script>
<style scoped lang="less">
.flex {
  display: flex;
  justify-content: space-around;
}
.home {
  width: 100%;
  height: 100vh;
  div {
    box-sizing: border-box;
  }
  .open {
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 999;
    color: #fff;
  }
  .col1,
  .col2,
  .col3 {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2vh 10px;
  }
  .col1 {
    flex: 3;
    .area1 {
      height: 60%;
      position: relative;
    }
    .area2 {
      height: 38%;
      position: relative;
    }
  }
  .col2 {
    flex: 4;
    .area1 {
      height: 65%;
      position: relative;
    }
    .area2 {
      height: 33%;
      position: relative;
    }
  }
  .col3 {
    flex: 3;
    .area1 {
      height: 49%;
      position: relative;
    }
    .area2 {
      height: 49%;
      position: relative;
    }
  }
}
</style>