基础创建
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>
? ? ? <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>
? ? ? <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>
? ? ? <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，并生成了一个简单的饼图。你可以根据自己的需求进一步配置和美化图表。
文章
————————————————
版权声明：本文为CSDN博主「黯然神伤888」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/dante1987/article/details/134825361