基礎(chǔ)創(chuàng)建
1. 創(chuàng)建一個(gè)新的 Vue 2 項(xiàng)目
如果你還沒(méi)有創(chuàng)建項(xiàng)目桩引，可以使用 Vue CLI 來(lái)創(chuàng)建一個(gè)新項(xiàng)目。首先確保你已經(jīng)安裝了 Node.js 和 npm收夸。然后安裝 Vue CLI 并創(chuàng)建一個(gè)新項(xiàng)目坑匠。
npm install -g @vue/cli
vue create my-vue-chart-project
在創(chuàng)建過(guò)程中選擇 Vue 2 版本。
2. 安裝 Chart.js 庫(kù)
進(jìn)入項(xiàng)目目錄卧惜，通過(guò) npm 或 yarn 安裝 Chart.js 庫(kù)厘灼。
cd my-vue-chart-project
npm install chart.js@2.9.4 --save # 安裝適用于 Vue 2 的 Chart.js 版本
柱形圖
3. 創(chuàng)建 BarChart 組件（柱形圖）
在 src/components 目錄下創(chuàng)建一個(gè)新的 Vue 組件 BarChart.vue。
<template>
? <div>
? ? <canvas id="bar-chart"></canvas>
? </div>
</template>
<script>
import Chart from 'chart.js';
export default {
? name: 'BarChart',
? props: {
? ? data: {
? ? ? type: Array,
? ? ? required: true
? ? },
? ? labels: {
? ? ? type: Array,
? ? ? required: true
? ? },
? ? title: {
? ? ? type: String,
? ? ? required: true
? ? },
? },
? mounted() {
? ? this.createBarChart();
? },
? methods: {
? ? createBarChart() {
? ? ? const ctx = document.getElementById('bar-chart').getContext('2d');
? ? ? new Chart(ctx, {
? ? ? ? type: 'bar',
? ? ? ? data: {
? ? ? ? ? labels: this.labels,
? ? ? ? ? datasets: [{
? ? ? ? ? ? label: this.title,
? ? ? ? ? ? backgroundColor: 'rgba(255, 99, 132, 0.2)',
? ? ? ? ? ? borderColor: 'rgba(255, 99, 132, 1)',
? ? ? ? ? ? borderWidth: 1,
? ? ? ? ? ? data: this.data
? ? ? ? ? }]
? ? ? ? },
? ? ? ? options: {
? ? ? ? ? scales: {
? ? ? ? ? ? yAxes: [{
? ? ? ? ? ? ? ticks: {
? ? ? ? ? ? ? ? beginAtZero: true
? ? ? ? ? ? ? }
? ? ? ? ? ? }]
? ? ? ? ? }
? ? ? ? }
? ? ? });
? ? }
? }
};
</script>
這個(gè)組件接收兩個(gè) prop：data 和 labels咽瓷，分別表示柱形圖的數(shù)據(jù)和標(biāo)簽设凹。
4. 在父組件中使用 BarChart 組件
首先，你需要在父組件（例如 App.vue）中導(dǎo)入 BarChart 組件茅姜，并注冊(cè)它闪朱。
<template>
? <div id="app">
? ? <div style="width:45%; margin-bottom: 20px;margin-left: 20px;">
? ? ? <bar-chart :data="chartData1" :labels="chartLabels1" :title="title1" />
? ? </div>
? </div>
</template>
<script>
import BarChart from './components/BarChart.vue';
export default {
? name: 'App',
? components: {
? ? BarChart
? },
? data() {
? ? return {
? ? ? chartLabels1: ['January', 'February', 'March', 'April', 'May', 'June', 'July','Auguest','September','October','November','December'],
? ? ? chartData1: [0, 10, 5, 2, 20, 30, 45,60,65,75,85,100],
? ? ? title1: '柱形圖'
? ? };
? }
};
</script>
在這里，我們定義了 chartData1 和 chartLabels1，然后將它們傳遞給 BarChart 組件奋姿。
5. 運(yùn)行項(xiàng)目
現(xiàn)在锄开，你可以啟動(dòng)項(xiàng)目來(lái)查看柱形圖。
npm run serve
訪(fǎng)問(wèn)瀏覽器中的項(xiàng)目地址（通常是 http://localhost:8080）称诗，你應(yīng)該能夠看到你的柱形圖萍悴。
最后根據(jù)你的需求，將后端數(shù)據(jù)放到chartLabels與chartData中即可
折線(xiàn)圖
6.創(chuàng)建LineChart組件（折線(xiàn)圖）
創(chuàng)建一個(gè)組件用于顯示折線(xiàn)圖： 在src/components目錄下創(chuàng)建一個(gè)新的組件文件LineChart.vue寓免，并在其中編寫(xiě)以下代碼
<template>
? <div>
? ? <canvas id="line-chart" ref="chart"></canvas>
? </div>
</template>
<script>
import Chart from 'chart.js';
export default {
? name: 'LineChart',
? props: {
? ? data: {
? ? ? type: Array,
? ? ? required: true
? ? },
? ? labels: {
? ? ? type: Array,
? ? ? required: true
? ? },
? ? title: {
? ? ? type: String,
? ? ? required: true
? ? }
? },
? mounted() {
? ? this.renderChart();
? },
? methods: {
? ? renderChart() {
? ? ? const ctx = this.$refs.chart.getContext('2d');
? ? ? new Chart(ctx, {
? ? ? ? type: 'line',
? ? ? ? data: {
? ? ? ? ? labels: this.labels,
? ? ? ? ? datasets: [{
? ? ? ? ? ? label: this.title,
? ? ? ? ? ? data: this.data,
? ? ? ? ? ? fill: false,
? ? ? ? ? ? borderColor: 'rgb(75, 192, 192)',
? ? ? ? ? ? tension: 0.1
? ? ? ? ? }]
? ? ? ? },
? ? ? ? options: {
? ? ? ? ? // responsive: true,
? ? ? ? ? // maintainAspectRatio: false,
? ? ? ? ? scales: {
? ? ? ? ? ? yAxes: [{
? ? ? ? ? ? ? ticks: {
? ? ? ? ? ? ? ? beginAtZero: true
? ? ? ? ? ? ? }
? ? ? ? ? ? }]
? ? ? ? ? }
? ? ? ? }
? ? ? });
? ? }
? }
};
</script>
<style scoped>
canvas {
? max-width: 600px;
? margin: 0 auto;
}
</style>
7.在App.vue中使用折線(xiàn)圖組件
打開(kāi)src/App.vue文件退腥，并進(jìn)行以下修改：
<template>
? <div id="app">
? ? <div style="width:45%;margin-bottom: 20px;margin-left: 20px;">
? ? ? <LineChart :data="chartData2" :labels="chartLabels2" :title="title2" />
? ? </div>
? </div>
</template>
<script>
import LineChart from './components/LineChart.vue';
export default {
? name: 'App',
? components: {
? ? LineChart
? },
? data() {
? ? return {
? ? ? chartLabels2: ['January', 'February', 'March', 'April', 'May', 'June', 'July','Auguest','September','October','November','December'],
? ? ? chartData2: [0, 10, 5, 2, 20, 30, 45,60,65,75,85,100],
? ? ? title2: '折線(xiàn)圖'
? ? };
? }
};
</script>
<style>
#app {
? text-align: center;
}
</style>
8.運(yùn)行項(xiàng)目：
在終端中執(zhí)行以下命令啟動(dòng)項(xiàng)目：
npm run serve
等待編譯完成后，在瀏覽器中訪(fǎng)問(wèn)http://localhost:8080（或其他指定的端口）再榄，即可看到顯示了折線(xiàn)圖的頁(yè)面。
這樣享潜，你就成功地在Vue 2.x項(xiàng)目中引入了Chart.js困鸥，并生成了一個(gè)簡(jiǎn)單的折線(xiàn)圖。你可以根據(jù)自己的需求進(jìn)一步配置和美化圖表剑按。
餅圖
9.創(chuàng)建PieChart組件用于顯示餅圖
在src/components目錄下創(chuàng)建一個(gè)新的組件文件PieChart.vue疾就，并在其中編寫(xiě)以下代碼：
<template>
? <div>
? ? <canvas id="pie-chart"></canvas>
? </div>
</template>
<script>
import Chart from 'chart.js';
export default {
? name: 'PieChart',
? props: {
? ? data: {
? ? ? type: Array,
? ? ? required: true
? ? },
? ? labels: {
? ? ? type: Array,
? ? ? required: true
? ? },
? ? title: {
? ? ? type: String,
? ? ? required: true
? ? }
? },
? mounted() {
? ? this.createBarChart();
? },
? methods: {
? ? createBarChart() {
? ? ? const ctx = document.getElementById('pie-chart').getContext('2d');
? ? ? new Chart(ctx, {
? ? ? ? type: 'pie',
? ? ? ? data: {
? ? ? ? ? labels: this.labels,
? ? ? ? ? datasets: [{
? ? ? ? ? ? label: this.title,
? ? ? ? ? ? backgroundColor: [
? ? ? ? ? ? ? 'rgb(127,255,212)',
? ? ? ? ? ? ? 'rgb(255,0,0)',
? ? ? ? ? ? ? 'rgb(255, 99, 132)',
? ? ? ? ? ? ? 'rgb(0,255,0)',
? ? ? ? ? ? ? 'rgb(54, 162, 235)',
? ? ? ? ? ? ? 'rgb(255, 205, 86)',
? ? ? ? ? ? ? 'rgb(0,255,255)',
? ? ? ? ? ? ? 'rgb(255,255,0)',
? ? ? ? ? ? ? 'rgb(8,46,84)',
? ? ? ? ? ? ? 'rgb(106,90,205)',
? ? ? ? ? ? ? 'rgb(54,94,15)',
? ? ? ? ? ? ? 'rgb(255,0,255)'
? ? ? ? ? ? ],
? ? ? ? ? ? borderColor: [
? ? ? ? ? ? 'rgb(127,255,212)',
? ? ? ? ? ? ? 'rgb(255,0,0)',
? ? ? ? ? ? ? 'rgb(255, 99, 132)',
? ? ? ? ? ? ? 'rgb(0,255,0)',
? ? ? ? ? ? ? 'rgb(54, 162, 235)',
? ? ? ? ? ? ? 'rgb(255, 205, 86)',
? ? ? ? ? ? ? 'rgb(0,255,255)',
? ? ? ? ? ? ? 'rgb(255,255,0)',
? ? ? ? ? ? ? 'rgb(8,46,84)',
? ? ? ? ? ? ? 'rgb(106,90,205)',
? ? ? ? ? ? ? 'rgb(54,94,15)',
? ? ? ? ? ? ? 'rgb(255,0,255)'
? ? ? ? ? ? ],
? ? ? ? ? ? borderWidth: 1,
? ? ? ? ? ? data: this.data
? ? ? ? ? }]
? ? ? ? },
? ? ? ? options: {
? ? ? ? ? scales: {
? ? ? ? ? ? yAxes: [{
? ? ? ? ? ? ? ticks: {
? ? ? ? ? ? ? ? beginAtZero: true
? ? ? ? ? ? ? }
? ? ? ? ? ? }]
? ? ? ? ? }
? ? ? ? }
? ? ? });
? ? }
? }
};
</script>
10.在App.vue中使用餅圖組件
打開(kāi)src/App.vue文件，并進(jìn)行以下修改：
<template>
? <div id="app">
? ? <div style="width:45%; margin-bottom: 20px;margin-left: 20px; margin-top: 20px">
? ? ? <PieChart :data="chartData3" :labels="chartLabels3" :title="title3"? />
? ? </div>
? </div>
</template>
<script>
import PieChart from './components/PieChart.vue';
export default {
? name: 'App',
? components: {
? ? PieChart
? },
? data() {
? ? return {
? ? ? chartLabels3: ['January', 'February', 'March', 'April', 'May', 'June', 'July','Auguest','September','October','November','December'],
? ? ? chartData3: [0, 10, 5, 2, 20, 30, 45,60,65,75,85,100],
? ? ? title3: '餅圖'
? ? };
? }
};
</script>
<style>
#app {
? text-align: center;
}
</style>
11.運(yùn)行項(xiàng)目：
在終端中執(zhí)行以下命令啟動(dòng)項(xiàng)目：
npm run serve
等待編譯完成后艺蝴，在瀏覽器中訪(fǎng)問(wèn)http://localhost:8080（或其他指定的端口）猬腰，即可看到顯示了餅圖的頁(yè)面。
這樣猜敢，你就成功地在Vue 2.x項(xiàng)目中引入了Chart.js姑荷，并生成了一個(gè)簡(jiǎn)單的餅圖。你可以根據(jù)自己的需求進(jìn)一步配置和美化圖表缩擂。
文章
————————————————
版權(quán)聲明：本文為CSDN博主「黯然神傷888」的原創(chuàng)文章鼠冕，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明胯盯。
原文鏈接：https://blog.csdn.net/dante1987/article/details/134825361
