VUe中 ehcarts随着点击浏览器放大缩小按钮自适应

最新推荐文章于 2025-07-23 10:16:29 发布

原创最新推荐文章于 2025-07-23 10:16:29 发布 · 538 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

vue 专栏收录该内容

26 篇文章

订阅专栏

该博客介绍了一个名为EleResize的JavaScript模块，用于处理元素的大小调整。它支持IE9+和非IE浏览器，通过监听元素的resize事件来实现响应式布局。在组件中引入EleResize后，可以方便地为图表等元素添加自适应大小的功能，确保在不同屏幕尺寸下保持正确显示。示例中展示了如何在ECharts图表上应用EleResize。

在public文件夹中创建js文件
a.js 文件名字随意

var EleResize = {
    _handleResize: function (e) {
      var ele = e.target || e.srcElement
      var trigger = ele.__resizeTrigger__
      if (trigger) {
        var handlers = trigger.__z_resizeListeners
        if (handlers) {
          var size = handlers.length
          for (var i = 0; i < size; i++) {
            var h = handlers[i]
            var handler = h.handler
            var context = h.context
            handler.apply(context, [e])
          }
        }
      }
    },
    _removeHandler: function (ele, handler, context) {
      var handlers = ele.__z_resizeListeners
      if (handlers) {
        var size = handlers.length
        for (var i = 0; i < size; i++) {
          var h = handlers[i]
          if (h.handler === handler && h.context === context) {
            handlers.splice(i, 1)
            return
          }
        }
      }
    },
    _createResizeTrigger: function (ele) {
      var obj = document.createElement('object')
      obj.setAttribute('style',
        'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;')
      obj.onload = EleResize._handleObjectLoad
      obj.type = 'text/html'
      ele.appendChild(obj)
      obj.data = 'about:blank'
      return obj
    },
    _handleObjectLoad: function (evt) {
      this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__
      this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize)
    }
  }
  if (document.attachEvent) { // ie9-10
    EleResize.on = function (ele, handler, context) {
      var handlers = ele.__z_resizeListeners
      if (!handlers) {
        handlers = []
        ele.__z_resizeListeners = handlers
        ele.__resizeTrigger__ = ele
        ele.attachEvent('onresize', EleResize._handleResize)
      }
      handlers.push({
        handler: handler,
        context: context
      })
    }
    EleResize.off = function (ele, handler, context) {
      var handlers = ele.__z_resizeListeners
      if (handlers) {
        EleResize._removeHandler(ele, handler, context)
        if (handlers.length === 0) {
          ele.detachEvent('onresize', EleResize._handleResize)
          delete ele.__z_resizeListeners
        }
      }
    }
  } else {
    EleResize.on = function (ele, handler, context) {
      var handlers = ele.__z_resizeListeners
      if (!handlers) {
        handlers = []
        ele.__z_resizeListeners = handlers
  
        if (getComputedStyle(ele, null).position === 'static') {
          ele.style.position = 'relative'
        }
        var obj = EleResize._createResizeTrigger(ele)
        ele.__resizeTrigger__ = obj
        obj.__resizeElement__ = ele
      }
      handlers.push({
        handler: handler,
        context: context
      })
    }
    EleResize.off = function (ele, handler, context) {
      var handlers = ele.__z_resizeListeners
      if (handlers) {
        EleResize._removeHandler(ele, handler, context)
        if (handlers.length === 0) {
          var trigger = ele.__resizeTrigger__
          if (trigger) {
            trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize)
            ele.removeChild(trigger)
            delete ele.__resizeTrigger__
          }
          delete ele.__z_resizeListeners
        }
      }
    }
  }
  export {EleResize}

然后在所需要使用到的组建中引用

import * as echarts from 'echarts';
import {
    EleResize
  } from '../../../../public/a.js'

然后开始写入方法，在methes中

caches() {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          color: ['#37a2da', '#ffdb5c', '#32c5e9', '#67e0e3', '#9fe6b8', '#ff9f7f', '#fb7293', '#e062ae', '#e690d1',
            '#e7bcf3', '#9d96f5', '#8378ea', '#96bfff'
          ],
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '40%',
            left: 'right',
            show: false
          },
          series: [{
            // name: 'Access From',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '12',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data:[]自己的参数值
          }]
        };

        myChart.setOption(option);
        var listener = () => {
          myChart.resize()
        }
        EleResize.on(chartDom, listener)
      }

地图和圆形图的尺寸是用的rem单位，放大缩小点击的是浏览器缩放按钮
在这里插入图片描述