vue2实现折线图和柱状图一起使用的代码

以下是一个简单的实现：

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

<script>
import Chart from 'chart.js';

export default {
  data() {
    return {
      lineChart: null,
      barChart: null,
    };
  },
  mounted() {
    this.renderLineChart();
    this.renderBarChart();
  },
  methods: {
    renderLineChart() {
      const ctx = this.$refs.lineChart.getContext('2d');
      this.lineChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [
            {
              label: 'Line Dataset',
              data: [65, 59, 80, 81, 56, 55, 40],
              fill: false,
              borderColor: 'rgb(75, 192, 192)',
              tension: 0.1,
            },
          ],
        },
      });
    },
    renderBarChart() {
      const ctx = this.$refs.barChart.getContext('2d');
      this.barChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [
            {
              label: 'Bar Dataset',
              data: [65, 59, 80, 81, 56, 55, 40],
              backgroundColor: 'rgb(75, 192, 192)',
            },
          ],
        },
      });
    },
  },
};
</script>

这个例子中，我们使用了 Chart.js 库来创建折线图和柱状图。我们在 `mounted` 钩子中调用了 `renderLineChart` 和 `renderBarChart` 方法来分别渲染两个图表。

在 `renderLineChart` 方法中，我们创建了一个折线图的实例，并传入了相应的数据。在 `renderBarChart` 方法中，我们创建了一个柱状图的实例，并传入了相应的数据。

我们在模板中使用了两个 `canvas` 元素来渲染图表。注意要为每个 `canvas` 元素设置一个引用，以便在组件中访问它们。