vue如何在同一页面布局饼图和柱状图

可以使用第三方的图表库，如ECharts来实现在同一页面布局饼图和柱状图。具体实现步骤如下：

1. 在Vue项目中安装ECharts库：`npm install echarts --save`

2. 在Vue组件中引入ECharts：`import echarts from 'echarts'`

3. 在Vue组件中定义饼图和柱状图的DOM容器，例如：

   <div id="pie-chart"></div>
   <div id="bar-chart"></div>

4. 在Vue组件中定义饼图和柱状图的数据和配置项，例如：

   const pieChartData = {
     // 饼图数据
   }

   const pieChartOptions = {
     // 饼图配置项
   }

   const barChartData = {
     // 柱状图数据
   }

   const barChartOptions = {
     // 柱状图配置项
   }

5. 在Vue组件的mounted钩子函数中，使用ECharts库初始化饼图和柱状图，并设置数据和配置项，例如：

   mounted() {
     // 初始化饼图
     const pieChart = echarts.init(document.getElementById('pie-chart'))
     pieChart.setOption(pieChartOptions)
     pieChart.setOption(pieChartData)

     // 初始化柱状图
     const barChart = echarts.init(document.getElementById('bar-chart'))
     barChart.setOption(barChartOptions)
     barChart.setOption(barChartData)
   }

6. 在Vue组件中使用CSS样式布局饼图和柱状图的位置和大小，例如：

   #pie-chart {
     width: 50%;
     height: 400px;
     float: left;
   }

   #bar-chart {
     width: 50%;
     height: 400px;
     float: right;
   }

这样就可以在同一页面布局饼图和柱状图了。