vue-chart.js example

Chart.js

<script>
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  mixins: [reactiveProp],
  extends: Line,
  props: {  //待會會從父組件傳入圖表資料
    chartData: { 
      type: Object,
      default: () => {}
    }
  },
  data: () => ({
    options: { // option 類似圖表的 config 檔，可以在此客製圖表樣式及其他細節
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        yAxes: [
          {
            ticks: {
              stepSize: 1 // 設定 y 軸的數字級距
            }
          }
        ]
      }
    }
  }),
  watch: { // 只要 chartData 改變，就要重新渲染圖表
    chartData() {
      this.$data._chart.destroy()  // 官方文件 api 提供的 destroy() 方法
      this.renderLineChart() // 客製重新渲染圖表的 function
    },
    deep: true
  },
  mounted() {
    this.renderLineChart() // 首次渲染圖表的 function 寫在 mounted，此處把 renderChart 拉成獨立的 function 因為會重複使用
  },
  methods: {
    renderLineChart() {
      this.renderChart(this.chartData, this.options) // 官方文件 api 提供的 renderChart() 方法，一定需要這兩個參數
    }
  }
}
</script>