如何让echarts在vue里自适应外部div的大小

最近做的项目里有很多数据可视化的页面,如下图,因为一个页面有多个图表,图标外部div使用的百分比,因此使图表自适应外部div大小变得很重

要,为了方便自己下次使用。特地记下来,以免自己忘记


一,首先布局外部div




二, 然后写四个对应的组件 引入

如下图这样

name绑定div的id名

然后给div样式


最后加上监听事件


这样就图表就可以自适应外部div大小了

附上一个完整的




©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,811评论 25 709
  • 唐代诗人张九龄在《感遇十二首》中写道:草木有本心,何求美人折。 草木求美本是自然的天性,又何须求美人的采撷呢?我有...
    激扬文字绘山川阅读 8,183评论 3 13
  • 人在第一印象大多都判断出对方的层次,所以外在很重要。 衣着!衣着的搭配得体就好,在不同的场合都有独特的风格适合自己...
    心栖息阅读 1,046评论 0 2
  • 朋友圈里又开始放烟花了,密密麻麻的,比天上的还多,每到正月十五看烟花的时候我就想起来几年前的同一天,熙熙攘攘街道,...
    叶二阅读 1,306评论 0 0