问题描述

<template><div id="chinaMapChart" style="width:100%;height:400px"></div>
</template>

设置的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图表自适应的几种基本解决方案

echarts——父元素宽度100%，但canvas宽度100px相关推荐

html5 网页宽度100,HTML5 Canvas 100％视口宽度？
为了使画布全屏宽度和高度始终如此,即使在调整浏览器大小时,也需要在将画布大小调整为window.innerHeight和window.innerWidth的函数中运行绘制循环. HTML JavaSc ...
html盒子模型子元素怎么水平占满父元素_CSS盒子模型、溢出处理、浮动、高度坍塌问题...
盒子模型 1.内容区 width 盒子内容区宽度 height 盒子内容区高度 background-color 背景颜色盒子可见大小由内容区,内边距和边框共同决定为元素设置边框,必须指定3个样式 ...
父元素与子元素的width关系
第一部分:父子元素都是内联元素代码演示如下: <!DOCTYPE html> <html> <head><title>fortest</titl ...
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
在设置了元素宽度width100%后再加上margin和padding超出父元素宽度,其实解决的方法很简单,直接使用CSS的 box-sizing 属性就可以解决这个问题,这个是CSS3新属性,可以将 ...
解决div宽度设置width:100%后再设置padding或margin超出父元素的办法
前言: 有时候我们需要子div和父div一样宽(高),但是需要设置一定边距时,如果子元素使用width:100%在设置padding或margin的话,就会出现溢出问题. HTML <div c ...
input,textarea元素设置宽度100%超出父元素宽度
<form style="width: 300px;"><input name="tenantIds" placeholder="律 ...
input textarea 宽度设置100%不超出父元素
<div style="padding-left: 10px;padding-right: 10px;"><textarea style="width: ...
vue图片宽高自适应_Echarts图标宽度变成100px，让图表宽度随着父元素自动适应，Vue实时监听宽度的变化，这可能是史上最好的解决方案！...
源码解读:当Echarts绘制图表计算宽度的时候,由于初始化图表设置为display: none,所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将widt ...
html不能超出div的宽度,DIV设置width后超出父元素应该如何解决
这次给大家带来DIV设置width后超出父元素应该如何解决,解决DIV设置width后超出父元素的注意事项有哪些,下面就是实战案例,一起来看一下. 前言本文介绍的是利用CSS3的新属性box-siz ...

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