salt-lake-hospital/src/components/Map/Map.vue

<template>
  <div :style="{ width: 'width', height: 'height' }" class="chart-box">
    <div id="myEchart" ref="myEchart" style="width: 100%;height:100%;"></div>
  </div>
</template>

<script>
import option from './Map.js';

export default {
  name: 'Map',
  data() {
    return {
      width: '',
      height: '',
    };
  },
  mounted() {
    console.log('地图');
    this.drawLine();
    let wh = window.innerWidth;
    let hg = window.innerHeight;
    this.width = wh + 'px';
    this.height = hg + 'px';
    console.log(this.height);
    window.onresize = () => {
      return (() => {
        wh = window.innerWidth;
        hg = window.innerHeight;
        this.width = wh + 'px';
        this.height = hg + 'px';
      })();
    };
  },
  beforeDestroy() {
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myEchart'));
      // 绘制图表
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="stylus" scoped>
/* 懒加载图标动画 */
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 弹窗样式 */
.layer {
  position: absolute;
  left: 400px;
  top: 300px;
  z-index: 100;
  width: 360px;
  height: 280px;
  background: rgba(10, 22, 64, 0.9);
  border-radius: 5px;
  border: 1px solid #122253;
  transform: translate(-100%, -100%);

  .content {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;

    p {
      font-size: 20px;
      color: #fff;
      line-height: 50px;
    }

    .col-item {
      height: 41px;
      margin-top: 20px;
      border-right: 1px solid #172353;

      .num {
        color: #ebf8ff;
        font-size: 18px;
      }

      .text {
        color: #507ebc;
        font-size: 12px;
      }
    }
  }

  .content::after {
    content: '';
    width: 120px;
    height: 2px;
    background: #FFCCFF;
    position: absolute;
    right: -120px;
    top: 50%;
    transform: translateY(-50%);
  }

  .content::before {
    content: '';
    width: 2px;
    height: 80px;
    background: #FFB800;
    position: absolute;
    right: -134px;
    top: 136px;
    transform: rotateZ(-20deg);
  }
}
</style>