vue实现折线图

Vue可以使用第三方库比如Chart.js来实现折线图。以下是一个简单的实现步骤：

1. 安装Chart.js和vue-chartjs

npm install chart.js vue-chartjs --save

2. 在Vue组件中引入vue-chartjs

import { Line } from 'vue-chartjs'

3. 定义一个继承Line的组件

export default {
  extends: Line,
  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}

4. 在模板中使用组件，并传入数据和选项

<template>
  <div>
    <line-chart :chart-data="chartData" :options="options"></line-chart>
  </div>
</template>

<script>
import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}
</script>

5. 在父组件中定义数据和选项，并传递给子组件

<template>
  <div>
    <line-chart :chart-data="chartData" :options="options"></line-chart>
  </div>
</template>

<script>
import LineChart from './LineChart.vue'

export default {
  components: {
    LineChart
  },
  data () {
    return {
      chartData: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'My First dataset',
            borderColor: '#FF6384',
            pointBackgroundColor: 'white',
            borderWidth: 1,
            data: [65, 59, 80, 81, 56, 55, 40]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>

这样，就可以在Vue组件中实现折线图了。