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

本是古典何须时尚 2023-06-21 10:13 12阅读 0赞

**整体效果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70][]

**全屏插件 同事用的是** 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();
     });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191212094748321.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70