在vscode中echarts连接并调用MySQL数据库的数据 - CSDN文库

要在VSCode中使用ECharts连接并调用MySQL数据库的数据，您需要遵循以下步骤： 1.安装MySQL和Node.js 在本地计算机上安装MySQL和Node.js环境。 2.创建数据库使用MySQL命令行或MySQL Workbench工具创建一个数据库并添加数据。例如，您可以创建一个名为“echarts_db”的数据库，并向其中添加一个名为“sales”的表。 3.安装必要的Node.js模块在终端或命令提示符中，导航到您的项目文件夹并运行以下命令： ``` npm install mysql npm install express npm install cors ``` 这将安装必要的Node.js模块，包括MySQL模块、Express框架和CORS模块。 4.创建服务器创建一个名为“server.js”的文件，并在其中添加以下代码： ``` const express = require('express'); const mysql = require('mysql'); const cors = require('cors'); const app = express(); app.use(cors()); const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: 'your_mysql_password', database: 'echarts_db' }); connection.connect(err => { if (err) { return err; } }); app.get('/sales', (req, res) => { const SELECT_ALL_SALES_QUERY = 'SELECT * FROM sales'; connection.query(SELECT_ALL_SALES_QUERY, (err, results) => { if (err) { return res.send(err); } else { return res.json({ data: results }); } }); }); app.listen(4000, () => { console.log('Server is running on port 4000'); }); ``` 这将创建一个服务器，监听端口4000，并连接到“echarts_db”数据库。它还将创建一个名为“sales”的API端点，用于获取所有销售数据。 5.创建ECharts图表创建一个名为“index.html”的文件，并在其中添加以下代码： ``` <!DOCTYPE html> <html> <head> <title>ECharts Demo</title>  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <style> /* 设置容器大小 */ #chart-container { width: 800px; height: 600px; } </style> </head> <body>  <div id="chart-container"></div> <script> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('chart-container')); // 获取销售数据 fetch('http://localhost:4000/sales') .then(response => response.json()) .then(data => { // 处理数据 var xAxisData = []; var seriesData = []; data.data.forEach(item => { xAxisData.push(item.month); seriesData.push(item.sales); }); // 设置图表配置 var option = { title: { text: '销售数据' }, tooltip: {}, legend: { data:['销售额'] }, xAxis: { data: xAxisData }, yAxis: {}, series: [{ name: '销售额', type: 'line', data: seriesData }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }); </script> </body> </html> ``` 这将创建一个简单的ECharts图表，用于显示从“/sales”端点获取的所有销售数据。 6.启动服务器在终端或命令提示符中，导航到您的项目文件夹并运行以下命令： ``` node server.js ``` 这将启动服务器并监听端口4000。 7.在浏览器中查看图表在浏览器中打开“index.html”文件，您将看到ECharts图表，显示从MySQL数据库中获取的所有销售数据。

阅读全文

相关推荐

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通