创建Vue2项目，引入chart.js，并生成柱形图、折线图、饼图

黯然神伤888

已于 2023-12-07 13:31:50 修改

阅读量1.4k

点赞数 11

分类专栏： vuejs JS和CSS nodejs 文章标签： javascript vue.js 前端

于 2023-12-06 10:34:05 首次发布

本文链接：https://blog.csdn.net/dante1987/article/details/134825361

版权

vuejs 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

JS和CSS

6 篇文章 0 订阅

订阅专栏

nodejs

2 篇文章 0 订阅

订阅专栏

基础创建

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>