echarts柱状图怎么设置柱的宽度_项目中常用的vue代码总结（echarts图表宽度自适应问题）...

最近有统计分析的需求，用的echarts，随便找了一个柱状图的例子试了试

需求要求图表随着浏览器的大小而动态改变

解决：

网上有说rem或者vw（相对于视口的宽度，视口被均分为100单位的vw），这种给宽度的方式只能第一次进页面的时候有效，达不到随着浏览器的大小而动态改变宽度；然后想到使用window.onresize监听浏览器的宽度，利用获取dom的方法给echarts宽度

window.onresize = function () {
      document.getElementsByClassName("main-echarts")[0].style.width = `${window.innerWidth}px`;
};

这样写之后虽然能给到表格宽度但是不能重新加载表格，需要调用

_this.myChart.resize();

所以

window.onresize = function () {
      document.getElementsByClassName("main-echarts")[0].style.width = `${window.innerWidth}px`;
      _this.myChart.resize();
};

解决。

window.addEventListener("resize", function () {
      _this.myChart.resize();
});

这样也是可以的