LineChart.vue 644 B

12345678910111213141516171819202122232425262728293031323334353637
  1. <template>
  2. <div>
  3. <canvas ref="chart"></canvas>
  4. </div>
  5. </template>
  6. <script>
  7. import { Chart, LineElement, CategoryScale, LinearScale, Title } from 'chart.js';
  8. export default {
  9. name: 'LineChart',
  10. props: {
  11. chartData: {
  12. type: Object,
  13. required: true
  14. },
  15. chartOptions: {
  16. type: Object,
  17. required: true
  18. }
  19. },
  20. mounted() {
  21. this.renderChart();
  22. },
  23. methods: {
  24. renderChart() {
  25. const ctx = this.$refs.chart.getContext('2d');
  26. new Chart(ctx, {
  27. type: 'line',
  28. data: this.chartData,
  29. options: this.chartOptions
  30. });
  31. }
  32. }
  33. }
  34. </script>