Vue的大屏自適應+echarts

1.命名為 : ScreenAdapter

1920 * 1080 的

<template>
  <div
    class="ScreenAdapter"
    :style="style"
  >
    <slot />
  </div>
</template>
<script>
export default {
  name: '',
  //參數注入
  props: {
    width: {
      type: String,
      default: '1920'
    },
    height: {
      type: String,
      default: '1080'
    }
  },
  data() {
    return {
      style: {
        width: this.width + 'px',
        height: this.height + 'px',
        transform: 'scale(1) translate(-50%, -50%)'
      }
    }
  },
  mounted() {
    this.setScale()
    window.onresize = this.Debounce(this.setScale, 1000)
  },
  methods: {
    Debounce: (fn, t) => {
      const delay = t || 500
      let timer
      return function() {
        const args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        const context = this
        timer = setTimeout(() => {
          timer = null
          fn.apply(context, args)
        }, delay)
      }
    },
    // 獲取放大縮小比例
    getScale() {
      const w = window.innerWidth / this.width
      const h = window.innerHeight / this.height
      return w < h ? w : h
    },
    // 設置比例
    setScale() {
      this.style.transform = 'scale(' + this.getScale() + ') translate(-50%, -50%)'
      console.log('任你千變萬化,我都不會影響性能')
    }
  }
}
</script>
<style lang="scss" scoped>
.ScreenAdapter {
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  background: red;
}
</style>

　　

2.將此組件作為外殼，包在我們搭建的頁面上

<ScreenAdapter> <div>大家好，我是大屏展示頁面</div> </ScreenAdapter> 

3.引入echarts

安裝依賴

　　cnpm install echarts -S

 

Main.js引入

　　import echarts from "echarts";

　　Vue.prototype.$echarts = echarts;

 

案例 : 

<template>
  <div class="home">
    <HelloWorld>
      <div id="main" style="width: 600px;height:400px;"></div>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      // 基於准備好的dom，初始化echarts實例
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定圖表的配置項和數據
      let option = {
        title: {
          text: "ECharts 入門示例"
        },
        tooltip: {},
        legend: {
          data: ["銷量"]
        },
        xAxis: {
          data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
        },
        yAxis: {},
        series: [
          {
            name: "銷量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      // 使用剛指定的配置項和數據顯示圖表。
      myChart.setOption(option);
    }
  }
};
</script>
<style lang="scss" scoped>

</style>