echarts 柱状图自适应

要使echarts柱状图自适应大小，可以在代码中添加相应的逻辑。根据提供的代码，可以在created()方法中添加setTimeout()函数来延迟执行columnar()方法。在columnar()方法中，可以使用echarts.init()方法初始化图表，并在window的resize事件中调用myChart.resize()方法来实现自适应大小的效果。具体代码如下所示：

created() {
  setTimeout(() => {
    this.columnar()
  }, 100)
},
methods: {
  columnar() {
    var myChart = echarts.init(document.getElementById('columnar'));
    // 自适应大小
    window.addEventListener('resize', () => {
      myChart.resize()
    })
    // 其他配置和数据设置
    // ...
  }
}

这样，当窗口大小改变时，echarts柱状图会自动调整大小以适应新的窗口尺寸。
#### 引用[.reference_title]
- *1* [vue中Echarts柱状图大小随浏览器窗口自适应、轴线刻度标签显示或隐藏](https://blog.csdn.net/weixin_45440916/article/details/120788023)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [Echarts绘制上下柱状图并自适应屏幕大小Vue](https://blog.csdn.net/yyanglirong/article/details/113183920)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]