問題描述

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

?

?設(shè)置的width：100%，結(jié)果出來的時(shí)候就變成了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下，初始化時(shí)由于沒有內(nèi)容width為0，導(dǎo)致echarts初始化之后width出錯(cuò)；?

解決方案

方法一：獲取window大小

僅適用于圖表需要和window相同大小時(shí)

在echarts初始化之前再用js獲取當(dāng)前屏幕的大小，然后再給他設(shè)置寬度?

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

方法二：監(jiān)聽DOM大小

參考文章：Vue + Element UI——監(jiān)聽DOM元素高度和寬度解決方案整理（八種方法）

參考文章

vue+element項(xiàng)目里實(shí)時(shí)監(jiān)聽某個(gè)div寬度的變化，然后執(zhí)行相應(yīng)的事件

echarts圖表自適應(yīng)，容器寬度設(shè)置為百分?jǐn)?shù)，但是圖表顯示不全，縮到一起

vue中使用echarts圖表自適應(yīng)的幾種基本解決方案

總結(jié)

以上是生活随笔為你收集整理的echarts——父元素宽度100%，但canvas宽度100px的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。