如何使用vue/chart.js构建线条图的数据结构

npm install vue-chartjs chart.js

yarn add vue-chartjs chart.js

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

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

export default {
  extends: Line,
  data() {
    return {
      data: {...},   // 这里填写图表的数据
      options: {...} // 这里填写图表的配置项
    };
  },
  mounted() {
    this.renderChart(this.chartData, this.options);
  }
}
</script>

data: {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [
    {
      label: 'Data 1',
      backgroundColor: 'transparent',
      borderColor: 'blue',
      data: [10, 20, 30, 40, 50, 60, 70]
    },
    {
      label: 'Data 2',
      backgroundColor: 'transparent',
      borderColor: 'red',
      data: [70, 60, 50, 40, 30, 20, 10]
    }
  ]
}

options: {
  responsive: true,
  title: {
    display: true,
    text: 'Line Chart'
  },
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
}

<template>
  <div>
    <line-chart-component></line-chart-component>
  </div>
</template>

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

export default {
  components: {
    LineChartComponent
  }
}
</script>