使用Html+echarts+ajax+flask，构建一个前后端分离的数据可视化（基础图形)

本文链接：https://blog.csdn.net/moyuxi188/article/details/131447538

前言

此次为学生党的一个期末作业，涉及到了python链接mysql、flask搭建简易后端、python数据处理、html+echarts绘制图表。
搭建后端。

作业要求

在这里插入图片描述

具体步骤

连接数据库

首先，因为题目要求为根据上一题的mysql表来进行可视化展示。于是，要先链接到数据库来获取数据库的数据。这里采用了python的pymysql库来连接mysql

#连接到mysql数据库
#ip或主机名、数据库的用户名、对应密码、数据库名字、数据库所使用的格式
conn = pymysql.connect(host='20210322005-master', user='root', password='Aa123-456', db='qimozuoye', charset='utf8')
cursor = conn.cursor()   # cursor当前的程序到数据之间连接管道
sql = 'select * from other_date_num' #sql查询
cursor.execute(sql) #写入sql语句
all_other_date_num = cursor.fetchall() #根据返回的sql查询结果赋予变量保存方便后续使用
cursor.close()# 关闭游标
conn.close()# 关闭数据库

flask后端搭建

from flask import Flask, request, redirect, render_template, session, jsonify #引入flask库
from flask_cors import CORS #引入解决跨域问题的库

app = Flask(__name__) 生成flask对象
CORS(app) #将对象实现跨域处理

@app.route('/data_other_date_num') #生成路由
def other_date_num():
    #数据处理部分
    #-----------
    return jsonify('返回的数据')
    

if __name__ == "__main__":#运行flask
    # app.run('0.0.0.0',port=80) #flask监听的端口
    app.run() #运行flask对象

ajax请求flask的数据

需要先引入jQuery库，jQuery可以在官网找到jQuery官网
由于是在html中使用，所以引入方式使用scrip标签的src属性引入就可以了
下面是使用方式

$.ajax({
        url: 'http://localhost:5000/data_repeat_hadoop',//请求的地址
        type: 'GET',//请求的类型
        success: function (e) {//返回数据后执行什么操作
            barOption.xAxis.data = e.x; //将数据的x键的值赋予给echarts的x轴作为标签
            barOption.series[0].data = e.y;
            barChart.setOption(barOption); //更新echarts的配置项
        }

↓该请求返回的数值(示例)
在这里插入图片描述

echarts绘图

echarts绘图在html，主要存放在js文件中，后在html文件中直接引入即可。
首先在html中创建一个盒子，用来存放echarts的图表，这里使用了id选择器来让图表确定盒子元素。

<div id="bar" style="width:900; height:300px;"></div>

然后根据自己想要实现的效果，来编写配置项。

var barChart = echarts.init(document.getElementById('bar'));//生成dom，并利用echarts进行初始化
var barOption;//定义barOption
barOption = { #添加配置项
    title:{
        text:'近几日重复数据出现次数柱状图',
        left:'center',
    },
    xAxis: {
        type: 'category',
        data: [],
    },
    yAxis: {
        type: 'value'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {},
    series: [
        {
            data: [],
            type: 'bar',
            label: {
                show: true, // 显示标签
                position: 'top', // 标签位置在柱状图的顶部
                formatter: '{c}', // 标签内容格式化，这里表示显示数据值
              },
        },
    ]
};
// 将ajax封装到函数中执行
function get_json_bar() {
    $.ajax({
        url: 'http://localhost:5000/data_repeat_hadoop',
        type: 'GET',
        success: function (e) {
            barOption.xAxis.data = e.x;
            barOption.series[0].data = e.y;
            barChart.setOption(barOption);
        }
    });
}
//执行函数
get_json_bar();

在html引入,注意！！！该引入必须位于设定的盒子下方，因为必须先有盒子对象，echarts才能画图然后插入。如果引入在前面，则会先执行echarts的绘图，但是此时没有盒子，会导致不出图。但是后续又生成了盒子，出现有盒子但是没图也没有报错的问题。

<script src="./echarts/bar.js"></script>

效果图如下
在这里插入图片描述

仿照上一步骤顺序，添加折线图，饼图配置项，并引入到html中。

在这里插入图片描述

最终效果图如下

在这里插入图片描述

学习心得

学习心得：使用Html+echarts+ajax+flask

在学习过程中，我掌握了Html、echarts、ajax和flask这四个技术的基本原理和使用方法。这些技术的结合为我提供了一种强大而灵活的方式来构建交互式网页应用。

首先，Html是网页开发的基础，它提供了一种标记语言，用于构建网页的结构和布局。我学会了使用Html创建各种元素，如标题、段落、列表、表格等，这些元素可以组合在一起，形成一个完整的网页。

然后，我学习了echarts这个可视化库，它能够帮助我展示数据和图表。通过echarts，我可以使用各种图表类型，如折线图、柱状图、饼图等，来展示数据的分布和变化趋势。我学会了使用echarts的API，通过配置选项和数据，来创建自定义的图表。

接下来，我学习了ajax这个技术，它可以实现网页的异步通信。使用ajax，我可以在不刷新整个页面的情况下，向服务器发送请求，并获取服务器返回的数据。这使得网页更加流畅和响应快速。我学会了通过ajax发送GET和POST请求，以及处理服务器返回的数据。

最后，我学习了flask这个Web框架，它可以帮助我构建基于Python的Web应用。flask提供了路由、模板和数据库等功能，使得开发Web应用变得更加简单。我学会了如何创建一个flask应用，并使用flask提供的API，将Html、echarts和ajax整合起来，构建一个交互式的网页应用。

通过使用Html+echarts+ajax+flask，我发现这些技术的结合可以帮助我开发出功能丰富、界面友好的网页应用。它们的学习曲线较为平缓，且有大量的文档和示例代码可供参考。我相信将来在实际项目中，我可以充分发挥这些技术的优势，提升用户体验，实现更多的功能需求。同时呢，其实这门课是hadoop，虽然是可视化的部分，但是主体为hadoop，因为选的题目原因，题目没有涉及到hadoop的相关内容，但是呢。学习Hadoop这门课给我带来了很多收获。通过深入学习Hadoop的基本原理和生态系统，我了解了大数据处理的概念和技术。Hadoop的分布式存储和计算框架使我能够处理大规模数据集，并应用MapReduce模型进行分布式计算。我学会了使用Hadoop的核心组件，如HDFS和YARN，以及相关工具和编程语言，如Hive和Pig。这门课的实践项目也使我对Hadoop的应用有了更深入的理解。通过学习Hadoop，我对大数据处理和分布式计算有了更全面的认识，为我的职业发展打下了坚实的基础。