Vue 輕量級的框架結構和強大的視圖渲染能力，使得它成為了越來越多 Web 開發者的首選選擇。而股票圖表又是很多金融網站和應用不可缺少的重要元素。在 Vue 中使用股票圖表，則需要一個適用于 Vue 的圖表組件。

在這里我們推薦使用 Vue-chartjs 這個圖表庫。首先我們需要在項目中下載 Vue-chartjs。

<code class="language-bash">npm install --save vue-chartjs

接下來我們需要在 main.js 中引入，然后使用 Vue.use() 安裝：

<code class="language-javascript">import Vue from 'vue'
import Chart from 'chart.js'
import VueChart from 'vue-chartjs'
Vue.use(VueChart)

接下來，我們就可以編寫我們的 vue 組件來使用圖表庫了。下面是一個簡單的股票圖表組件示例：

<code class="language-html"><template>
<div>
<line-chart :data="data" :options="options" :width="400" :height="400"></line-chart>
</div>
</template>
<script>
import {Line} from 'vue-chartjs'
export default {
extends: Line,
data() {
return {
data: {
labels: ['2012', '2013', '2014', '2015', '2016', '2017', '2018'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 39, 10, 40, 39, 80, 40]
}
]
}
}
},
mounted() {
this.renderChart(this.data, this.options)
},
computed: {
options() {
return {
responsive: true,
maintainAspectRatio: false
}
}
}
}
</script>

這個組件使用了 Line 組件，即線圖。在 data 中我們設置了 X 軸的標簽以及數據集的數值。在 mounted 方法中調用 renderChart 方法繪制圖表，同時設置了 responsive 和 maintainAspectRatio 屬性，用于自適應和維持縱橫比。

以上就是使用 Vue-chartjs 繪制股票圖表的簡單示例。