express框架
框架中目录结构
-
app.js: 启动文件，或者说入口文件。
-
package.json: 存储着工程的信息及模块依赖，当在 dependencies 中添加依赖的模块时， 运行 npm install ，npm 会检查当前目录下的 package.json，并自动安装所有指定的模块。
-
node_modules: 存放 package.json 中安装的模块，当你在 package.json 添加依赖的模块并安装后，存放在这个文件夹下。
-
public: 存放 image、css、js 等文件。
-
routes: 存放路由文件。
-
views: 存放视图文件或者说模板文件。
文件
echarts.js是echats的离线版本
draw_linechart.js
//第一个图表
var xA = [];
var yA = [];
var pieA = [];
function MyChart() {
var myChart1 = echarts.init(document.getElementById("change-echarts1"));
var option1 = {
title: {
text: 'PH数据变化情况'
},
tooltip: {
},
legend: {
data:['PH']
},
xAxis: {
type: 'category',
data: xA
},
yAxis: {
type: 'value'
},
series: [{
name: 'PH',
type: 'line',
data: yA
}]
};
myChart1.setOption(option1);
console.log(pieA);
var myChart2 = echarts.init(document.getElementById("change-echarts2"));
var option2 = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a}<br/>{b} :{c} ({d}% )',
// 设置提示框浮层的位置
// position: function(point, params, dom, rect, size){
// return [point[1],point[1]];
// }
},
legend: {
orient: 'vertical',
left: 'left',
// data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
data: xA
},
series: [
{
name: '访问来源',
type: 'pie',
// radius: '55%',
// center: ['50%', '60%'],
// data: [
// {value: 335, name: '直接访问'},
// {value: 310, name: '邮件营销'},
// {value: 234, name: '联盟广告'},
// {value: 135, name: '视频广告'},
// {value: 1548, name: '搜索引擎'}
// ],
data: pieA,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart2.setOption(option2);
var myChart3 = echarts.init(document.getElementById("change-echarts3"));
var option3 = {
title: {
text: 'PH数据变化情况'
},
tooltip: {
},
legend: {
data:['PH']
},
xAxis: {
type: 'category',
data: xA
},
yAxis: {
type: 'value'
},
series: [{
name: 'PH',
type: 'bar',
data: yA
}]
};
myChart3.setOption(option3);
}
function myJson() {
$.ajax({
url:"/line_chart/echarts",
type:"post",
data: {
},
dataType: "json",
success: function(result) {
console.log(result);
for(var i = 0;i<result.length;i++) {
var obj = new Object();
xA.push(result[i].id);
yA.push(result[i].values);
obj.name =result[i].id;
obj.value = result[i].values;
pieA[i]=obj;
}
MyChart()
}
})
}
//执行函数
myJson();
// 测试用
// var app = {
// xday:[],
// yvalue:[]
// };
// xdays = [];
// yvalues = [];
// option = null;
// option = {
// title: {
// text: 'PH数据变化情况'
// },
// tooltip: {},
// legend: {
// data:['PH']
// },
// xAxis: {
// type: 'category',
// data: app.xday
// },
// yAxis: {
// type: 'value'
// },
// series: [{
// type: 'line',
// data: app.yvalue
// }]
// };
// 发送ajax请求，从后台获取json数据
// $(document).ready(function () {
// dodraw();
// console.log(app.xday);
// console.log(app.yvalue)
// });
// function dodraw(){
// $.ajax({
// url:'http://localhost:3000/line_chart/echarts',
// // data:{},
// type:'get',
// dataType:'json',
// success:function(result){
// console.log(result);
// //把后台返回的数据给数组赋值
// for(i=0;i<result.length;i++){
// xdays.push(result[i].id);
// yvalues.push(result[i].values);
// }
// app.xday = xdays;
// app.yvalue = yvalues;
// // 使用刚指定的配置项和数据显示图表。
// // myChart.setOption(option);
// }
// })
// };
line_chart1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Myecharts</title>
<!-- <script type="text/text/javascript" src="../conf/jquery.js"></script> -->
<!-- <script type="text/javascript" src="tools/emm.js">测试画图</script> -->
<!-- <script type="text/javascript" src="tools/emm.js"></script> -->
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="tools/echarts.js"></script>
<style>
.div-inline{
display:inline}
</style>
</head>
<body>
<div id="change-echarts1" style="width:400px;height:300px;left:120px;background: yellowgreen">
<!-- <script type="text/javascript" src="./node_modules/jquery/dist/jquery.js"></script> -->
</div>
<div id="change-echarts2" style="height:600px;background: green">
<!-- <script type="text/javascript" src="./node_modules/jquery/dist/jquery.js"></script> -->
</div>
<div id="change-echarts3" style="width:800px;height:600px;background: yellow">
<!-- <script type="text/javascript" src="./node_modules/jquery/dist/jquery.js"></script> -->
<script type="text/javascript" src="tools/draw_linechart.js"></script>
</body>
</html>
line_chart.js
var mysql = require('mysql');
var express = require('express');
var router = express.Router();
router.all('/echarts',function (req,res,next) {
// 连接到mysql
var connection = mysql.createConnection({
//创建mysql实例
host:'127.0.0.1',
port:'3306',
user:'root',
password:'root',
database:'echarts'
});
connection.connect();
var sql = 'SELECT * FROM line_chart';
// 转换格式
// var i;
// jsonData = {}
// xdays = []
// yvalues = []
connection.query(sql, function (err,result) {
if(err){
console.log('[SELECT ERROR]:',err.message);
}
//result 的格式如下：
// [{id:1,tdsvalue:"31"},{id:2,tdsvalue:"42"},{id:3,tdsvalue:"23"},{id:4,tdsvalue:"44"},{id:5,tdsvalue:"55"},{id:6,tdsvalue:"36"}]
console.log(result);
res.send(result);
var xA = [];
var yA = [];
// 想要转换的格式（更新Echarts折线里面数据要转换成下面格式）
// {xdays:Array(6),yvalues:Array(6)}
// [1,2,3,4,5,6]
// ["31","42","23","44","55","36"]
// for(i=0;i<result.length;i++){
// xdays.push(result[i].id);
// yvalues.push(result[i].values);
// }
// console.log('1x: '+xdays);
// console.log('1y: '+yvalues);
// jsonData['xdays']=xdays;
// jsonData['yvalues'] = yvalues;
// res.send(jsonData);
// console.log(jsonData);
});
connection.end();
});
module.exports = router;
app.js
重点在这两句
var line_chartRouter = require(’./routes/line_chart’);
…
app.use(’/line_chart’, line_chartRouter);
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var line_chartRouter = require('./routes/line_chart');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({
extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/line_chart', line_chartRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {
};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
数据库
效果
哈哈，效果是有了，但是观赏感就没有那么强了
