Диаграмма Echarts реализует адаптацию для большого экрана

Описание: Использование диаграмм в сочетании с данными может иметь очень интуитивно понятный визуальный эффект. Отображение на большом экране стало распространенным сценарием для отображения корпоративных данных. Как добиться адаптации к большому экрану - это проблема, которую нам необходимо решить. Ниже приведен один из решения, используя CSS Атрибут преобразования и процент дизайна, если есть какие-либо недостатки, пожалуйста, критикуйте

выполнить:

1. Подготовьте компонент-контейнер, ширина = 100vw, высота = 100%, в качестве фона большого экрана:

 <div class="screen-adapter">
 </div>
 
 .screen-adapter {
  width: 100vw;
  min-height: 100%;
  max-height: 100vh;
  overflow: hidden;
  background: #0c1a3c;
}

2. По чертежам дизайна, предоставленным студентами-дизайнерами, можно рассчитать процентное соотношение каждой части площади, например, общий размер w*h, а ширина и высота одного из значков w1 * h1. , чтобы реализовать обычную схему раскроя.

<div class="screen-adapter">
    <div class="content-wrap" :style="style">
      <slot></slot>
    </div>
</div>
props: {
    w: { // 设计图尺寸宽
      type: Number,
      default: 1600
    },
    h: { // 设计图尺寸高
      type: Number,
      default: 900
    }
},
data () {
    return {
      style: {
        width: this.w + 'px',
        height: this.h + 'px',
        transform: 'scale(1) translate(-50%, -50%)' // 默认不缩放，垂直水平居中
      }
    }
}
  
.content-wrap {
  transform-origin: 0 0;
  position: absolute;
  top: 50%;
  left: 50%;
}

3. На основе второго шага необходимо рассчитать коэффициент масштабирования в соответствии с конкретным размером большого экрана и установить коэффициент масштабирования.Следует отметить, что при привязке события изменения размера не забывайте избегать тряски , и когда страница будет уничтожена, не забудьте удалить событие монитора:

mounted () {
    this.setScale()
    this.onresize = this.debounce(() => this.setScale(), 100)
    window.addEventListener('resize', this.onresize)
},
beforeDestroy () {
    window.removeEventListener('resize', this.onresize)
},
 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.w
      const h = window.innerHeight / this.h
      return w < h ? w : h
    },
    // 设置缩放比例
    setScale () {
      this.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`
    }
  }

4. На этом этапе общая структура получена.Необходимо только поместить восстановленные чертежи каждой части компонентов значка в предыдущие слоты.Размер каждой части компонентов значка может быть основан на процентном соотношении предусмотрено конструкцией.Все коды примерно таковы:

// ScreenAdapter.vue
<template>
  <div class="screen-adapter">
    <div class="content-wrap" :style="style">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    w: {
      type: Number,
      default: 1600
    },
    h: {
      type: Number,
      default: 900
    }
  },
  data () {
    return {
      style: {
        width: this.w + 'px',
        height: this.h + 'px',
        transform: 'scale(1) translate(-50%, -50%)'
      }
    }
  },
  mounted () {
    this.setScale()
    this.onresize = this.Debounce(() => this.setScale(), 100)
    window.addEventListener('resize', this.onresize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.onresize)
  },
  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.w
      const h = window.innerHeight / this.h
      return w < h ? w : h
    },
    setScale () {
      this.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`
    }
  }
}
</script>
<style>
.screen-adapter {
  width: 100%;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background: #0c1a3c;
}
.content-wrap {
  transform-origin: 0 0;
  position: absolute;
  top: 50%;
  left: 50%;
}
</style>

Структура каталогов проекта выглядит следующим образом

Схема эффекта выглядит следующим образом

Видно, что все диаграммы шрифтов масштабируются пропорционально.