基础创建
1. 创建一个新的 Vue 2 项目
如果你还没有创建项目，可以使用 Vue CLI 来创建一个新项目。首先确保你已经安装了 Node.js 和 npm。然后安装 Vue CLI 并创建一个新项目。
npm install -g @vue/cli
vue create my-vue-chart-project
在创建过程中选择 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. 创建 BarChart 组件（柱形图）
在 src/components 目录下创建一个新的 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，分别表示柱形图的数据和标签。
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. 运行项目
现在，你可以启动项目来查看柱形图。
npm run serve
访问浏览器中的项目地址（通常是 http://localhost:8080），你应该能够看到你的柱形图。
最后根据你的需求，将后端数据放到chartLabels与chartData中即可
折线图
6.创建LineChart组件（折线图）
创建一个组件用于显示折线图： 在src/components目录下创建一个新的组件文件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.运行项目：
在终端中执行以下命令启动项目：
npm run serve
等待编译完成后，在浏览器中访问http://localhost:8080（或其他指定的端口），即可看到显示了折线图的页面。
这样，你就成功地在Vue 2.x项目中引入了Chart.js，并生成了一个简单的折线图。你可以根据自己的需求进一步配置和美化图表。
饼图
9.创建PieChart组件用于显示饼图
在src/components目录下创建一个新的组件文件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.运行项目：
在终端中执行以下命令启动项目：
npm run serve
等待编译完成后，在浏览器中访问http://localhost:8080（或其他指定的端口），即可看到显示了饼图的页面。
这样，你就成功地在Vue 2.x项目中引入了Chart.js，并生成了一个简单的饼图。你可以根据自己的需求进一步配置和美化图表。
