vue设置二个折线图并排显示

你可以使用 Vue.js 中的第三方库来显示折线图，例如 Chart.js 或 ECharts。以下是一种使用 Chart.js 的方法来设置两个折线图并排显示的示例：

1. 安装 Chart.js

npm install chart.js --save

2. 在 Vue 组件中引入 Chart.js：

import Chart from 'chart.js';

3. 在 Vue 组件的 `mounted` 生命周期中设置两个 Canvas 元素，每个元素对应一个折线图：

mounted() {
  // 第一个折线图
  const ctx1 = document.getElementById('chart1').getContext('2d');
  this.chart1 = new Chart(ctx1, {
    type: 'line',
    data: {
      // 折线图的数据
    },
    options: {
      // 折线图的配置选项
    }
  });

  // 第二个折线图
  const ctx2 = document.getElementById('chart2').getContext('2d');
  this.chart2 = new Chart(ctx2, {
    type: 'line',
    data: {
      // 折线图的数据
    },
    options: {
      // 折线图的配置选项
    }
  });
}

4. 在 Vue 组件的模板中添加两个 Canvas 元素，用于显示折线图：

<template>
  <div>
    <canvas id="chart1"></canvas>
    <canvas id="chart2"></canvas>
  </div>
</template>

5. 最后，你可以使用 CSS 将两个 Canvas 元素并排显示：

canvas {
  width: 50%;
  float: left;
}

这样就可以实现两个折线图并排显示了。当然，你也可以使用其他的 CSS 布局方法来实现这个效果。