echarts——父元素宽度100%，但canvas宽度100px

问题描述

 

 设置的width：100%，结果出来的时候就变成了100px；

官方文档

https://echarts.apache.org/zh/api.html#echarts

问题分析

echarts源代码：

Painter.prototype._getWidth = function() {
        var root = this.root;
        var stl = root.currentStyle || document.defaultView.getComputedStyle(root);
        return ((root.clientWidth || parseInt(stl.width, 10)) - parseInt(stl.paddingLeft, 10) - parseInt(stl.paddingRight, 10)).toFixed(0) - 0;
    };

文档解释： 

由于此组件在Element UI的el-col下，初始化时由于没有内容width为0，导致echarts初始化之后width出错； 

解决方案

方法一：获取window大小

仅适用于图表需要和window相同大小时

在echarts初始化之前再用js获取当前屏幕的大小，然后再给他设置宽度 

var myChart=$("#myChart");
myChart.style.width=window.innerWidth+'px';
chartObj=echarts.init(myChart);
chartObj.setOption(option);

方法二：监听DOM大小

参考文章：Vue + Element UI——监听DOM元素高度和宽度解决方案整理（八种方法）

参考文章

vue+element项目里实时监听某个div宽度的变化，然后执行相应的事件

echarts图表自适应，容器宽度设置为百分数，但是图表显示不全，缩到一起

vue中使用echarts图表自适应的几种基本解决方案