什么是Echarts？

Echarts是一個(gè)由百度開源的數(shù)據(jù)可視化庫，可以幫助開發(fā)人員實(shí)現(xiàn)各種針對(duì)大數(shù)據(jù)的可視化展示。

為什么要使用Echarts連接數(shù)據(jù)庫？

對(duì)于數(shù)據(jù)分析和可視化需求越來越高，如何讓數(shù)據(jù)更加鮮明、直觀呈現(xiàn)出來是我們需要面對(duì)的問題。Echarts其強(qiáng)大的可視化效果加上支持多種數(shù)據(jù)源的特點(diǎn)能解決我們這個(gè)需求，其中一種就是使用Echarts連接數(shù)據(jù)庫。

如何連接MySQL數(shù)據(jù)庫？

首先需要在項(xiàng)目中引入echarts的庫文件，然后安裝mysql模塊并且在項(xiàng)目中require：

const echarts = require('echarts');  
const mysql = require('mysql');   
const connection = mysql.createConnection({       
host: 'localhost',       
user: 'root',       
password: 'password',       
database: 'test'    
});   
connection.connect();   
connection.query('SELECT * FROM TABLE_NAME', function (error, results, fields) {       
if (error) throw error;       
let data = results;      
console.log(data);           
connection.end();       
});

其中要將`TABLE_NAME`替換為自己想要查詢的表名。

使用Echarts渲染數(shù)據(jù)

在獲取到數(shù)據(jù)之后可以使用Echarts提供的API進(jìn)行圖表的配置和繪制。

let myChart = echarts.init(document.getElementById('main'));   
let option = {       
xAxis: {        
type: 'category',        
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']        
},       
yAxis: {        
type: 'value'       
},       
series: [{        
data: [820, 932, 901, 934, 1290, 1330, 1320],        
type: 'line'       
}]   
};   
myChart.setOption(option);

其中可以通過`data`參數(shù)設(shè)置數(shù)據(jù)的展示，通過`type`參數(shù)設(shè)置數(shù)據(jù)展示的類型。此處使用的是默認(rèn)的測(cè)試數(shù)據(jù)，如果需要使用自定義的數(shù)據(jù)則需將數(shù)據(jù)源指向query結(jié)果即可。

結(jié)語

本文介紹了使用Echarts連接MySQL數(shù)據(jù)庫進(jìn)行數(shù)據(jù)的可視化，可供開發(fā)人員在需要實(shí)現(xiàn)數(shù)據(jù)可視化展示時(shí)進(jìn)行參考。