将折线图和条形图放在一起 vue echarts

可以通过 ECharts 的 grid 和 xAxis、yAxis 配置实现将折线图和条形图放在一起。以下是一个示例代码：

<template>
  <div class="container">
    <div class="chart-container">
      <div class="line-chart" ref="lineChart"></div>
      <div class="bar-chart" ref="barChart"></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  mounted() {
    this.renderLineChart()
    this.renderBarChart()
  },
  methods: {
    renderLineChart() {
      const lineChart = echarts.init(this.$refs.lineChart)

      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      }

      lineChart.setOption(option)
    },
    renderBarChart() {
      const barChart = echarts.init(this.$refs.barChart)

      const option = {
        grid: {
          left: '60px',
          top: '20px',
          bottom: '30px',
          right: '20px',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'bar'
        }]
      }

      barChart.setOption(option)
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 100%;
}

.chart-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.line-chart,
.bar-chart {
  width: 50%;
  height: 100%;
}
</style>

以上示例代码中，使用了 ECharts 的 grid 和 xAxis、yAxis 配置来实现将折线图和条形图放在一起。其中，通过 grid 配置设置了两个图表的间距和边距；通过 xAxis、yAxis 配置设置了折线图和条形图的坐标轴。在 mounted 钩子函数中，分别调用了 renderLineChart 和 renderBarChart 方法来渲染折线图和条形图。