vue设置二个折线图并排

要将两个折线图并排显示，可以使用Vue中的flex布局和echarts组件。

首先，在Vue组件中引入echarts库和需要的数据：

import echarts from 'echarts'

export default {
  data () {
    return {
      chartData1: {...}, // 第一个折线图数据
      chartData2: {...} // 第二个折线图数据
    }
  },
  mounted () {
    this.renderChart()
  },
  methods: {
    renderChart () {
      // 渲染第一个折线图
      let chart1 = echarts.init(document.getElementById('chart1'))
      chart1.setOption({...})
      
      // 渲染第二个折线图
      let chart2 = echarts.init(document.getElementById('chart2'))
      chart2.setOption({...})
    }
  }
}

然后，在模板中使用flex布局将两个折线图放在一行中：

<template>
  <div class="chart-container">
    <div class="chart-item">
      <div id="chart1"></div>
    </div>
    <div class="chart-item">
      <div id="chart2"></div>
    </div>
  </div>
</template>

<style>
.chart-container {
  display: flex;
}

.chart-item {
  flex: 1;
  margin-right: 20px;
}
</style>

这样，两个折线图就会并排显示在同一行中。注意要设置每个折线图容器的宽度，避免它们被挤压或拉伸。