echarts横向柱状图 柱高度
时间: 2023-10-10 18:12:12 浏览: 123
echarts 横着显示的柱状图
根据引用中的代码和注释,要实现echarts横向柱状图的柱高度自适应,可以按照以下步骤进行操作:
1. 在HTML代码中,创建一个div元素作为echarts的容器,并设置其宽度为100%:
```
<div id="main2" style="width:100%"></div>
```
2. 在JavaScript代码中,使用echarts的API初始化图表,并设置图表的配置项option2:
```
let myChart = this.$echarts.init(document.getElementById('main2'));
myChart.setOption(option2);
```
3. 根据数据源的长度和每个柱状的高度,计算容器的自适应高度:
```
var autoHeight = option2.yAxis.data.length * 50 + 150;
```
4. 使用echarts的getDom()方法获取图表的节点,并分别设置节点的高度:
```
myChart.getDom().style.height = autoHeight + "px";
myChart.getDom().childNodes<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [echarts横向柱状图](https://download.csdn.net/download/qq_42396791/11856336)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [echarts横向柱状图高度随动态数据长度自适应](https://blog.csdn.net/weixin_54351962/article/details/124297111)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [echarts横向柱状图设置可变高度](https://blog.csdn.net/qq_56489154/article/details/128821365)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]
阅读全文