vue 饼图和柱状图在同一页面布局
时间: 2023-12-22 11:11:00 浏览: 132
【JavaScript源代码】vue echarts实现横向柱状图.docx
可以将饼图和柱状图分别放到不同的 div 容器中,然后在同一页面布局中使用 CSS 样式控制它们的位置和大小。例如:
```html
<div class="chart-container">
<div id="pie-chart"></div>
<div id="bar-chart"></div>
</div>
```
```css
.chart-container {
display: flex;
justify-content: space-around;
align-items: center;
}
#pie-chart {
width: 40%;
}
#bar-chart {
width: 50%;
}
```
这样就可以将饼图和柱状图分别放到不同的 div 容器中,并且通过 CSS 样式进行布局控制,实现在同一页面布局的效果。
阅读全文