問題描述

<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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。