一、創建數據表
在Navicat Premium打開test數據庫，新建echarts表，字段爲id、title、value。
雙擊echarts表，向其中添加數據。
二、創建文件
在VScode中新建20文件夾，其中有server.js文件和static文件夾，static文件夾下面有index.html文件和從前面章節複製來的ajax.js、echarts.min.js文件。
給server.js敲入代碼，其中listen(80)爲監聽80端口，瀏覽網址可以省略冒號及其後面的80端口號。
var http = require('http'),
fs = require('fs'),
mysql = require('mysql'),
url = require('url')
var con = mysql.createConnection({
host: 'localhost',
user: 'root',
database: 'test',
password: '123456'
})
con.connect()
http.createServer(function (req, res) {
var urls = url.parse(req.url, true)
switch (urls.pathname) {
case '/':
static('/index.html', res, 'text/html')
break;
case '/ajax.js':
static('/ajax.js', res, 'application/x-javascript')
break;
case '/echarts.min.js':
static('/echarts.min.js', res, 'application/x-javascript')
break;
case '/echarts':
mysql_query('select * from echarts', res)
break;
default:
res.end()
break;
}
}).listen(80)
console.log('http://127.0.0.1')
function static(pathname, res, type) {
fs.readFile('./static' + pathname, function (err, results) {
res.writeHead(200, { 'Content-Type': type })
if (err) {
res.write('404')
} else {
res.write(results)
}
res.end()
})
}
function mysql_query(sql, res) {
con.query(sql, function (err, results) {
res.writeHead(200, { 'Content-Type': 'application/json;charset=UTF8' })
if (err) {
res.write('SQL錯誤')
} else {
res.write(JSON.stringify(results))
}
res.end()
})
}
給index.html敲入代碼，其中option的dataset是4.0版本echarts的功能，可以設置json數組作爲圖表數據源，配合series下面的encode: { x: ‘’, y: ‘’ }設置x軸和y軸呈現json數據項的key鍵的值。
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>index</title>
<script src="ajax.js"></script>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:400px;height:300px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
dataset: { source: [] },
xAxis: { type: 'category' },
yAxis: {},
series: [{
type: 'bar', barWidth: '40%',
encode: { x: '', y: '' }
},]
}
var host = 'http://127.0.0.1/'
ajax({
type: 'get',
url: host + 'echarts',
data: {},
success: function (results) {
option.dataset.source = JSON.parse(results)
option.series[0].encode = { x: 'title', y: 'value' }
myChart.setOption(option);
},
error: function (err) { }
})
</script>
</body>
</html>
20文件夾下node server，瀏覽器打開http://127.0.0.1(不用輸入端口號)
