Vue 輕量級(jí)的框架結(jié)構(gòu)和強(qiáng)大的視圖渲染能力，使得它成為了越來(lái)越多 Web 開(kāi)發(fā)者的首選選擇。而股票圖表又是很多金融網(wǎng)站和應(yīng)用不可缺少的重要元素。在 Vue 中使用股票圖表，則需要一個(gè)適用于 Vue 的圖表組件。

在這里我們推薦使用 Vue-chartjs 這個(gè)圖表庫(kù)。首先我們需要在項(xiàng)目中下載 Vue-chartjs。

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

接下來(lái)我們需要在 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)

接下來(lái)，我們就可以編寫(xiě)我們的 vue 組件來(lái)使用圖表庫(kù)了。下面是一個(gè)簡(jiǎn)單的股票圖表組件示例：

<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>

這個(gè)組件使用了 Line 組件，即線圖。在 data 中我們?cè)O(shè)置了 X 軸的標(biāo)簽以及數(shù)據(jù)集的數(shù)值。在 mounted 方法中調(diào)用 renderChart 方法繪制圖表，同時(shí)設(shè)置了 responsive 和 maintainAspectRatio 屬性，用于自適應(yīng)和維持縱橫比。

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