新能源车辆数据可视化"/>
新能源车辆数据可视化
目录
要求：
以柱状图的方式链接MySQL数据展示重复数据的车辆信息：
以折线图的方式链接MySQL数据展示前一天上传的车辆数据总条数信息：
以饼图的方式链接MySQL数据展示前一天上传的车辆数据中非当天的数据总条数信息：
附上效果图：
一：折线图
首先是建立MySQL数据库
py文件代码：
HTML文件代码：
二、折线图
经典的MySQL表
附上py文件代码与HTML代码：
三、饼图
MySQL表
py文件代码与HTML代码：
总结：
实现思路：
py文件中的代码实现：
然后是HTML中的实现：
要求：
以柱状图的方式链接MySQL数据展示重复数据的车辆信息：
（表必须包含字段：数据生成日期、车架号、重复次数。比如2023-01-01这一天，vin0001有两条重复数据，则mysql表中的记录则为2023-01-01、vin0001、2）
以折线图的方式链接MySQL数据展示前一天上传的车辆数据总条数信息：
（表字段必须包含：数据生成日期、非当天的数据总条数）
以饼图的方式链接MySQL数据展示前一天上传的车辆数据中非当天的数据总条数信息：
（表字段必须包含：数据生成日期、非当天的数据总条数）
界面美观、清晰
附上效果图：
用到的技术：数据可视化echarts+mysql+python+flask
一：折线图
首先是建立MySQL数据库
这里使用的是VScode的插件：
建表的MySQL语句如下：
CREATE TABLE IF NOT EXISTS vehicle_repeat (
create_time varchar(10) DEFAULT NULL,
Vehicle_number varchar(6) DEFAULT NULL,
repeat_frequency int DEFAULT NULL
) DEFAULT CHARSET=utf8;
INSERT INTO vehicle_repeat VALUES ('2021-05-01',vin01,20);
INSERT INTO vehicle_repeat VALUES ('2021-05-02',vin02,17);
INSERT INTO vehicle_repeat VALUES ('2021-05-03',vin03,31);
INSERT INTO vehicle_repeat VALUES ('2021-05-04',vin04,27);
INSERT INTO vehicle_repeat VALUES ('2021-05-05',vin05,56);
INSERT INTO vehicle_repeat VALUES ('2021-05-06',vin06,54);
INSERT INTO vehicle_repeat VALUES ('2021-05-07',vin07,10);
INSERT INTO vehicle_repeat VALUES ('2021-05-08',vin08,87);py文件代码：
import json
from flask import Flask,render_template,url_for
import pymysql
app = Flask(__name__)
@app.route('/')
def my_tem():#在浏览器上渲染html模板return render_template('1.html')
@app.route('/test',methods=['POST'])
def my_test():#创建连接数据库connection = pymysql.connect(host='localhost',user='root',passwd='123456',db='test',port=3306,charset='utf8')cur=connection.cursor() #游标（指针）cursor的方式操作数据sql='SELECT Vehicle_number,repeat_frequency FROM vehicle_repeat' #sql语句cur.execute(sql) #execute(query, args):执行单条sql语句。see=cur.fetchall() #使结果全部可看#print(sql)#print(see)#print(cur)#创建json数据xdays=[]jsonData={}yvalues=[]for data in see:xdays.append(data[0])yvalues.append(data[1])#print(xdays)#print(yvalues)jsonData['xdays']=xdaysjsonData['yvalues']=yvalues#print(jsonData)#将json格式转成str，因为如果直接将dict类型的数据写入json会发生报错，因此将数据写入时需要用到该函数。j=json.dumps(jsonData,ensure_ascii=False)#print(j)cur.close()connection.close()#渲染html模板return (j)if __name__ == "__main__":#运行项目#my_test() #测试app.run(debug = True) #整个项目的运行
HTML文件代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src=".7.2/jquery.min.js"></script><!-- 引入jquery.js --><script src=".1.0.rc2/echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 1800px;height: 900px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));//建立axjx所需的json数据 var app={xday:[],yvalue:[]};//发送ajax请求$(document).ready(function () {getData();console.log(app.xday);console.log(app.yvalue)});//设计画图function getData() {$.ajax({//渲染的是127.0.0.1/test 下的json数据url:'/test',data:{},type:'POST',async:false,dataType:'json',success:function(data) {app.xday = data.xdays;app.yvalue = data.yvalues;myChart.setOption({title: {text: '车辆重复记录'},tooltip: {},legend: {data:['重复次数']},xAxis: {data: app.xday},yAxis: {},toolbox: {show: true, //是否显示工具栏组feature: {mark: {show: true},//显示图像所提供的数据dataView: {show: true, readOnly: false},//配置项还原restore: {show: true},//保存为图片saveAsImage: {show: true}}},//series: [{name: '重复次数',type: 'bar',itemStyle: { //通常情况下：normal:{label:{name:'重复记录数量',show: true, //开启显示position: 'top', //在上方显示textStyle: { //数值样式color: 'black',fontSize: 16}},}},data: app.yvalue}]})},error:function (msg) {console.log(msg);alert('系统发生错误');}})}</script>
</body>
</html>二、折线图
经典的MySQL表
建库语句参照上方柱形图的，更改表面与字段名和数据即可
附上py文件代码与HTML代码：
import json
from flask import Flask,render_template,url_for
import pymysql
app = Flask(__name__)
@app.route('/')
def my_tem():#在浏览器上渲染html模板return render_template('2.html')
@app.route('/test',methods=['POST'])
def my_test():#创建连接数据库connection = pymysql.connect(host='localhost',user='root',passwd='123456',db='test',port=3306,charset='utf8')cur=connection.cursor() #游标（指针）cursor的方式操作数据sql='SELECT create_time,count FROM vehicle_records' #sql语句cur.execute(sql) #execute(query, args):执行单条sql语句。see=cur.fetchall() #使结果全部可看#print(sql)#print(see)#print(cur)#创建json数据xdays=[]jsonData={}yvalues=[]for data in see:xdays.append(data[0])yvalues.append(data[1])#print(xdays)#print(yvalues)jsonData['xdays']=xdaysjsonData['yvalues']=yvalues#print(jsonData)#将json格式转成str，因为如果直接将dict类型的数据写入json会发生报错，因此将数据写入时需要用到该函数。j=json.dumps(jsonData,ensure_ascii=False)#print(j)cur.close()connection.close()#渲染html模板return (j)if __name__ == "__main__":#运行项目#my_test() #测试app.run(debug = True) #整个项目的运行<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src=".7.2/jquery.min.js"></script><!-- 引入jquery.js --><script src=".1.0.rc2/echarts.min.js"></script>
</head>
<body><div id="main" style="width: 1800px;height: 900px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));//建立axjx所需的json数据 var app={xday:[],yvalue:[]};//发送ajax请求$(document).ready(function () {getData();console.log(app.xday);console.log(app.yvalue)});//设计画图function getData() {$.ajax({//渲染的是127.0.0.1/test 下的json数据url:'/test',data:{},type:'POST',async:false,dataType:'json',success:function(data) {app.xday = data.xdays;app.yvalue = data.yvalues;myChart.setOption({title: {text: '车辆日期记录'},tooltip: {},legend: {data:['日期']},xAxis: {axisLabel:{interval:0,rotate:40},data: app.xday},yAxis: {},toolbox: {show: true, //是否显示工具栏组feature: {mark: {show: true},//显示图像所提供的数据dataView: {show: true, readOnly: false},//配置项还原restore: {show: true},//保存为图片saveAsImage: {show: true}}},//series: [{name: '日期',type: 'line',label:{show:true,position:'top'},data: app.yvalue}]})},error:function (msg) {console.log(msg);alert('系统发生错误');}})}</script>
</body>
</html>
三、饼图
MySQL表
py文件代码与HTML代码：
import json
from flask import Flask,render_template,url_for
import pymysql
app = Flask(__name__)
@app.route('/')
def my_tem():#在浏览器上渲染html模板return render_template('3.html')
@app.route('/test',methods=['POST'])
def my_test():#创建连接数据库connection = pymysql.connect(host='localhost',user='root',passwd='123456',db='test',port=3306,charset='utf8')cur=connection.cursor() #游标（指针）cursor的方式操作数据sql='SELECT create_time,counts FROM vehicle_norecords' #sql语句cur.execute(sql) #execute(query, args):执行单条sql语句。see=cur.fetchall() #使结果全部可看#print(sql)#print(see)#print(cur)#创建json数据xdays=[]jsonData={}yvalues=[]for data in see:xdays.append(data[0])yvalues.append(data[1])#print(xdays)#print(yvalues)jsonData['xdays']=xdaysjsonData['yvalues']=yvalues#print(jsonData)#将json格式转成str，因为如果直接将dict类型的数据写入json会发生报错，因此将数据写入时需要用到该函数。j=json.dumps(jsonData,ensure_ascii=False)#print(j)cur.close()connection.close()#渲染html模板return (j)if __name__ == "__main__":#运行项目#my_test() #测试app.run(debug = True) #整个项目的运行<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src=".7.2/jquery.min.js"></script><!-- 引入jquery.js --><script src=".1.0.rc2/echarts.min.js"></script>
</head>
<body><div id="main" style="width: 1800px;height: 900px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));//建立axjx所需的json数据 var app={xday:[],yvalue:[]};//发送ajax请求$(document).ready(function () {getData();console.log(app.xday);console.log(app.yvalue)});//设计画图function getData() {$.ajax({//渲染的是127.0.0.1/test 下的json数据url:'/test',data:{},type:'POST',async:false,dataType:'json',success:function(data) {app.xday = data.xdays;app.yvalue = data.yvalues;myChart.setOption({title: {text: '车辆非当日记录饼图'},tooltip: {},legend: {data:['记录数量']},toolbox: {show: true, //是否显示工具栏组feature: {mark: {show: true},//显示图像所提供的数据dataView: {show: true, readOnly: false},//配置项还原restore: {show: true},//保存为图片saveAsImage: {show: true}}},//series: [{name: '记录数量',type: 'pie',data: [{value:[app.yvalue[0]],name:[app.xday[0]]},{value:[app.yvalue[1]],name:[app.xday[1]]},{value:[app.yvalue[2]],name:[app.xday[2]]},{value:[app.yvalue[3]],name:[app.xday[3]]},{value:[app.yvalue[4]],name:[app.xday[4]]},{value:[app.yvalue[5]],name:[app.xday[5]]}]}]})},error:function (msg) {console.log(msg);alert('系统发生错误');}})}</script>
</body>
</html>
总结：
了解链接MySQL的数据代码，认识HTML网页的基础与要制作的图形即可即可轻松完成
实现思路：
py文件中的代码实现：
通过pymysql.connect链接数据库，cursor() #游标（指针）cursor的方式操作数据
写入MySQL语句execute(query, args):执行单条sql语句。fetchall() #使结果全部可看
定义空的列表与数组存入数据使用for循环拿出数据存入定义的空列表中
我们还需要将json格式转成str，因为如果直接将dict类型的数据写入json会发生报错，因此将数据写入时需要用到该函数。
最后是：if __name__ == "__main__"整个项目的运行
然后是HTML中的实现：
先导入echarts.js与jquery.js
准备一个盒子div来装入图形
基于准备好的dom，初始化echarts实例
建立axjx所需的json数据
发送ajax请求
设计画图
渲染json数据
加入一些配置项，将数据导入即可
最后感谢以下这位大佬：小牛头#Python3+MySql+Flask+Echarts
更多推荐
新能源车辆数据可视化
发布评论