vue echart接入mysql

原创

mob64ca12e7b5cf 2024-06-10 04:04:37 ©著作权

文章标签 数据 Vue MySQL 文章分类 MySQL 数据库

©著作权归作者所有：来自51CTO博客作者mob64ca12e7b5cf的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现Vue Echart接入MySQL

简介

在前端开发中，常常需要将后端数据展示在图表中，而Echart是一个非常强大的数据可视化工具，结合Vue.js可以实现数据展示的功能。本文将教你如何在Vue项目中接入MySQL数据库，并使用Echart展示数据。

流程

以下是实现“Vue Echart接入MySQL”的具体步骤：

gantt
    title Vue Echart接入MySQL实现流程
    section 接入MySQL
    连接数据库: 2022-01-01, 3d
    查询数据: 2022-01-04, 2d
    section 使用Echart展示数据
    安装Echart: 2022-01-06, 1d
    显示数据: 2022-01-07, 2d

步骤

1. 连接数据库

首先，我们需要在Vue项目中连接MySQL数据库。

```javascript
// 首先安装mysql依赖
npm install mysql --save

// 在Vue项目中新建一个db.js文件，用于连接数据库
const mysql = require('mysql');

// 创建数据库连接
const connection = mysql.createConnection({
  host: 'localhost', // 数据库地址
  user: 'root', // 用户名
  password: '123456', // 密码
  database: 'test' // 数据库名
});

// 连接数据库
connection.connect((err) => {
  if (err) {
    console.error('数据库连接失败: ' + err.stack);
    return;
  }
  console.log('数据库连接成功');
});

module.exports = connection;

2. 查询数据

接下来，我们需要编写代码从MySQL数据库中查询数据。

```javascript
// 在Vue组件中引入数据库连接
import connection from '@/db.js';

// 查询数据
connection.query('SELECT * FROM table', (error, results, fields) => {
  if (error) throw error;
  console.log('查询结果: ', results);
});

3. 安装Echart

现在，我们需要在Vue项目中安装Echart库。

```bash
npm install echarts --save

4. 显示数据

最后，我们可以在Vue组件中使用Echart展示查询到的数据。

```vue
<template>
  <div id="chart" style="width: 600px; height: 400px"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  mounted() {
    // 初始化Echart实例
    let myChart = echarts.init(document.getElementById('chart'));

    // Echart配置项
    let option = {
      title: {
        text: 'Echart数据展示'
      },
      xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E', 'F']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [10, 20, 30, 40, 50, 60],
        type: 'bar'
      }]
    };

    // 使用配置项展示数据
    myChart.setOption(option);
  }
};
</script>