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 } } }
浩楠哥
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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常用属性