ECharts 是一個(gè)用 JavaScript 編寫的開源可視化庫(kù)，它可以提供豐富的可視化圖表展示，在實(shí)際項(xiàng)目中也有著廣泛的應(yīng)用。本文將介紹如何使用 ECharts 獲取 MySQL 數(shù)據(jù)庫(kù)中的內(nèi)容，并將其展示為圖表。
首先需要在 HTML 頁(yè)面中引入 ECharts 相關(guān)代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ECharts Demo</title> </head> <body> <div id="chart"></div> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts-gl.min.js"></script> <script> // 代碼實(shí)現(xiàn)部分 </script> </body> </html>
接下來(lái)需要使用 AJAX 獲取 MySQL 數(shù)據(jù)庫(kù)中的內(nèi)容，具體代碼如下：
// 引入 MySQL 模塊
const mysql = require('mysql');
// 創(chuàng)建連接池
const pool = mysql.createPool({
connectionLimit: 10,
host : 'localhost',
user : 'root',
password : '123456',
database : 'test'
});
// 發(fā)送 SQL 查詢語(yǔ)句
pool.query('SELECT * FROM `table`', function (error, results, fields) {
if (error) throw error;
// 處理查詢結(jié)果
const data = results.map(item =>[item.x, item.y]);
// 將數(shù)據(jù)綁定到 ECharts 中進(jìn)行展示
const chart = echarts.init(document.getElementById('chart'));
chart.setOption({
title: {
text: 'MySQL 數(shù)據(jù)庫(kù)內(nèi)容展示'
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'value',
axisLabel: {
formatter: '{value}'
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}'
}
},
series: [{
data: data,
type: 'scatter'
}]
});
});在發(fā)起 AJAX 請(qǐng)求時(shí)，需要先引入 Node.js 中的 MySQL 模塊，并根據(jù) MySQL 數(shù)據(jù)庫(kù)的連接信息創(chuàng)建連接池。將查詢結(jié)果處理后，可以得到一個(gè)二維數(shù)組，然后將其綁定到 ECharts 中進(jìn)行展示。
通過(guò)以上代碼，就可以實(shí)現(xiàn) ECharts 獲取 MySQL 數(shù)據(jù)庫(kù)中的內(nèi)容，并將其展示為散點(diǎn)圖或其他類型的圖表。