基礎創(chuàng)建
1. 創(chuàng)建一個新的 Vue 2 項目
如果你還沒有創(chuàng)建項目，可以使用 Vue CLI 來創(chuàng)建一個新項目。首先確保你已經(jīng)安裝了 Node.js 和 npm。然后安裝 Vue CLI 并創(chuàng)建一個新項目。
npm install -g @vue/cli
vue create my-vue-chart-project
在創(chuàng)建過程中選擇 Vue 2 版本。
2. 安裝 Chart.js 庫
進入項目目錄，通過 npm 或 yarn 安裝 Chart.js 庫。
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)建一個新的 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>
這個組件接收兩個 prop：data 和 labels，分別表示柱形圖的數(shù)據(jù)和標簽。
4. 在父組件中使用 BarChart 組件
首先，你需要在父組件（例如 App.vue）中導入 BarChart 組件，并注冊它。
<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. 運行項目
現(xiàn)在，你可以啟動項目來查看柱形圖。
npm run serve
訪問瀏覽器中的項目地址（通常是 http://localhost:8080），你應該能夠看到你的柱形圖。
最后根據(jù)你的需求，將后端數(shù)據(jù)放到chartLabels與chartData中即可
折線圖
6.創(chuàng)建LineChart組件（折線圖）
創(chuàng)建一個組件用于顯示折線圖： 在src/components目錄下創(chuàng)建一個新的組件文件LineChart.vue，并在其中編寫以下代碼
<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中使用折線圖組件
打開src/App.vue文件，并進行以下修改：
<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: '折線圖'
? ? };
? }
};
</script>
<style>
#app {
? text-align: center;
}
</style>
8.運行項目：
在終端中執(zhí)行以下命令啟動項目：
npm run serve
等待編譯完成后，在瀏覽器中訪問http://localhost:8080（或其他指定的端口），即可看到顯示了折線圖的頁面。
這樣，你就成功地在Vue 2.x項目中引入了Chart.js，并生成了一個簡單的折線圖。你可以根據(jù)自己的需求進一步配置和美化圖表。
餅圖
9.創(chuàng)建PieChart組件用于顯示餅圖
在src/components目錄下創(chuàng)建一個新的組件文件PieChart.vue，并在其中編寫以下代碼：
<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中使用餅圖組件
打開src/App.vue文件，并進行以下修改：
<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.運行項目：
在終端中執(zhí)行以下命令啟動項目：
npm run serve
等待編譯完成后，在瀏覽器中訪問http://localhost:8080（或其他指定的端口），即可看到顯示了餅圖的頁面。
這樣，你就成功地在Vue 2.x項目中引入了Chart.js，并生成了一個簡單的餅圖。你可以根據(jù)自己的需求進一步配置和美化圖表。
文章
————————————————
版權聲明：本文為CSDN博主「黯然神傷888」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/dante1987/article/details/134825361
