Vue Canvas圖表是一個可視化呈現數據的工具，可以通過繪制Canvas圖表來更好地展現數據。

下面演示一個簡單的Canvas圖表：

<template>
<canvas ref="myCanvas"></canvas>
</template>
<script>
export default {
data() {
return {
chartData: [10, 20, 30, 40, 50, 60],
colors: ['#FF4136', '#0074D9', '#2ECC40', '#FFDC00', '#FF851B', '#B10DC9'],
canvasWidth: 500,
canvasHeight: 300
}
},
mounted() {
this.$nextTick(() => {
this.createChart();
});
},
methods: {
createChart() {
const canvas = this.$refs.myCanvas;
canvas.width = this.canvasWidth;
canvas.height = this.canvasHeight;
const ctx = canvas.getContext('2d');
const barsWidth = (canvas.width / this.chartData.length) * 0.6;
const xOffset = (canvas.width - (barsWidth * this.chartData.length)) / 2;
const maxHeight = canvas.height * 0.8;
const unit = maxHeight / Math.max(...this.chartData);
this.chartData.forEach((dataPoint, i) => {
const barHeight = dataPoint * unit;
const x = xOffset + (i * barsWidth);
const y = maxHeight - barHeight;
ctx.fillStyle = this.colors[i];
ctx.fillRect(x, y, barsWidth, barHeight);
});
}
}
}
</script>

代碼部分涉及Vue及Canvas的基礎知識。我們通過Vue的單文件組件的形式創建了一個canvas，并在mounted中調用了createChart來繪制圖表。createChart中，我們首先通過getContext獲得了Canvas的上下文，然后計算了每一個條形圖的大小和位置，用fillRect方法繪制出來。數據和顏色都可以根據需求自定義。