vue3+ts引入横向柱状图

在Vue3中引入横向柱状图，你可以使用echarts库来实现。首先，你需要在项目中安装echarts库。可以使用npm或yarn命令来进行安装。安装完成后，你可以在组件中引入echarts库。

接下来，你可以使用screenAdapter方法进行屏幕适配。这个方法会根据屏幕的宽度来动态计算标题字体的大小，并设置一些样式选项，比如柱状图的宽度和圆角大小。

在模板中，你可以为容器设置一个高度，可以使用vh单位和百分比来设置动态高度。你可以借助CSS3函数calc来动态计算容器的高度。

最后，你需要在Vue3的生命周期方法中调用screenAdapter方法，并手动调用echarts的resize方法来确保图表能够自适应。

这样，你就可以成功引入横向柱状图了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue-echarts线型图和横向柱状图(条形图)](https://blog.csdn.net/seeeeeeeeeee/article/details/118516280)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* [Vue中Echarts实现横向柱状图,并且通过WebSocket即时通讯更新](https://blog.csdn.net/weixin_45389051/article/details/108885861)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]