Vue を使用して電子メール送信の統計グラフを実装する方法

npm install vue vue-chartjs chart.js

<template>
  <div class="email-stats-chart">
    <line-chart :chart-data="chartData"></line-chart>
  </div>
</template>

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

export default {
  extends: Line,
  props: {
    chartData: {
      type: Object,
      required: true,
    }
  },
  mounted() {
    this.renderChart(this.chartData, {});
  }
}
</script>

<style scoped>
.email-stats-chart {
  width: 500px;
  height: 300px;
}
</style>

<template>
  <div class="email-stats-page">
    <email-stats-chart :chart-data="statData"></email-stats-chart>
  </div>
</template>

<script>
import EmailStatsChart from './EmailStatsChart.vue';

export default {
  components: {
    EmailStatsChart,
  },
  data() {
    return {
      statData: {
        labels: [
          'January', 'February', 'March', 'April', 'May', 'June', 'July'
        ],
        datasets: [
          {
            label: 'Sent',
            backgroundColor: '#3A84FF',
            borderColor: '#3A84FF',
            data: [500, 1000, 1500, 2000, 2500, 3000, 3500]
          },
          {
            label: 'Opened',
            backgroundColor: '#FF6C00',
            borderColor: '#FF6C00',
            data: [400, 800, 1200, 1600, 2000, 2400, 2800]
          },
          {
            label: 'Clicked',
            backgroundColor: '#FFC400',
            borderColor: '#FFC400',
            data: [300, 600, 900, 1200, 1500, 1800, 2100]
          }
        ]
      }
    }
  }
}
</script>

<style>
.email-stats-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

npm run serve