记录一下最近做的 echarts 可视化数据展示 全屏插件和图表自适应屏幕

整体效果

全屏插件 同事用的是 fullscreen

全屏插件要在script里面引用一下

import fullscreen from "vue-fullscreen";

Vue.use(fullscreen);   

//点击图标全屏  .pageWrap是第二层的div大小是 width:1920px;height: 1080px; 和设计图一样
    toggle() {
      this.$fullscreen.toggle(this.$el.querySelector(".pageWrap"),{
        wrap: false,
        callback: this.fullscreenChange
      });
    },

//全屏事件  #qp是图标的id
    fullscreenChange(fullscreen) {
      this.fullscreen = fullscreen;
      if (this.fullscreen == true) {
        $("#qp").hide();
      } else {
        $("#qp").show();
      }
    },

//最外层div 设置了width 100%

下面是同事写的图表自适应大小：

  //.example 是最外层div  .pageWrap是第二层div

  scale() {
      var WW = $(window).width();
      var scaleNum = WW / 1920;
      var PH = 1080 * scaleNum;
      $(".example").height(PH);
      $(".example").width(WW);

      $(".pageWrap").css({
        "-webkit-transform": "scale(" + scaleNum + ")",
        transform: "scale(" + scaleNum + ")"
      });
    },

    selfAdaption() {
      const self = this; //因为箭头函数会改变this指向，指向windows。所以先把this保存
      setTimeout(() => {
        window.addEventListener("resize", function() {
          if (self.$refs.Echart1) {
            self.chart1 = self.$echarts.init(self.$refs.Echart1);
            self.chart1.resize();
          }
          if (self.$refs.Echart2) {
            self.chart2 = self.$echarts.init(self.$refs.Echart2);
            self.chart2.resize();
          }
          if (self.$refs.Echart3) {
            self.chart3 = self.$echarts.init(self.$refs.Echart3);
            self.chart3.resize();
          }
          if (self.$refs.Echart4) {
            self.chart4 = self.$echarts.init(self.$refs.Echart4);
            self.chart4.resize();
          }
          if (self.$refs.Echart5) {
            self.chart5 = self.$echarts.init(self.$refs.Echart5);
            self.chart5.resize();
          }
          if (self.$refs.Echart6) {
            self.chart7 = self.$echarts.init(self.$refs.Echart6);
            self.chart7.resize();
          }
          if (self.$refs.Echart7) {
            self.chart8 = self.$echarts.init(self.$refs.Echart7);
            self.chart8.resize();
          }
        });
      }, 10);
    },

mounted:

 this.scale();

 var that = this;
 window.addEventListener("resize", function(){
     that.scale();
 });