echarts图标如何自适应宽度

echarts 图标直接设置宽度 100% 会默认魏100px,需要自适应方法如下

图标html

<el-col :span="8">
                        <div id="userNianling_three" 
                            style="width: 100%; height: 500px;" 
                        />
                    </el-col>

date里面定义图表

1
2
3
4
5
data() {
            return {
                 myChart: null,                                         
            }
        },

  mounted里面

复制代码
mounted() {  
            // 宽度变化动态变化宽度
            this.__resizeHandler = debounce(() => {
                if(this.myChart) {
                    this.myChart.resize()
                }
            }, 100)
            window.addEventListener('resize', this.__resizeHandler)

            // 宽度给个初始化-某则只能变化宽度才能变化
            this.__resizeHandler()
        },
复制代码

然后页面销毁要去除监听

beforeDestroy() {
            window.removeEventListener('resize', this.__resizeHandler);
        },

图标的数据赋值就正常赋值就好了

页面需要引入方法

import { debounce } from '@/utils'

untils 里面

复制代码
export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }
复制代码

 

posted @   haonanElva  阅读(432)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
历史上的今天:
2023-08-07 阿里云: web如何直传oss & 常见问题
2023-08-07 vue图片压缩插件
2017-08-07 HTML5 video常用属性
点击右上角即可分享
微信分享提示