Flask+MySQL+Echarts:实现数据可视化

阅读目录

      • Flask
      • 一、目录结构
      • 二、连接数据库 mysql.py
      • 三、Flask.py
      • 四、echarts.html
      • 五、运行项目Flask.py

Flask

Flask是一个轻量级的WSGI Web应用程序框架。它旨在使快速入门变得容易,并具有扩展到复杂应用程序的能力。它最初是围绕Werkzeug 和Jinja的简单包装,并已成为最受欢迎的Python Web应用程序框架之一。

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello World!'

if __name__ == '__main__':
    app.run()

这是flask框架制作的一个最小的应用。使用python运行后访问localhost:5000就能看到网页显示Hello world。
这里首先引入了Flask类,然后给这个类创建了一个实例,name代表这个模块的名字。因为这个模块是直接被运行的所以此时name的值是main。然后用route()这个修饰器定义了一个路由,告诉flask如何访问该函数。最后用run()函数使这个应用在服务器上运行起来。

一、目录结构

Flask+MySQL+Echarts:实现数据可视化_第1张图片

二、连接数据库 mysql.py

import pymysql
class Mysql(object):
    def __init__(self):
        try:
            self.conn = pymysql.connect(host='localhost',user='root',password='123456',database='meishi',charset="utf8")
            self.cursor = self.conn.cursor()  # 用来获得python执行Mysql命令的方法(游标操作)
            print("连接数据库成功")
        except:
            print("连接失败")

    def getItems(self):
        sql= "select *from food"    #获取food数据表的内容
        self.cursor.execute(sql)
        items = self.cursor.fetchall()  #接收全部的返回结果行
        return items

三、Flask.py

from flask import Flask
from flask import render_template
from mysql import Mysql

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello World!'
@app.route('/echarts')
def getdata():
    db = Mysql()
    items=db.getItems()
    return render_template('echarts.html',items=items)

if __name__ == '__main__':
    app.run(debug=True)	#debug=True发生错误时会返回发生错误的地方
  • render_template():调用了”render_template()”方法来渲染模板。方法的第一个参数”echarts.html”指向你想渲染的模板名称,第二个参数”items”是你要传到模板去的变量,变量可以传多个。

四、echarts.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="/static/echarts.min.js">script>
    <style>
        #main{
      
            width: 600px;
            height: 400px;
        }
    style>
head>
<body>
<div id="main">div>
    <script type="text/javascript">
            // 基于准备好的dom,初始化 echarts 实例并绘制图表。
            var myChart=echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            var option = {
      
                title: {
      
                    text: '食材与数量'
                },
                dataZoom: [{
      
                          type: 'slider',
                          show: true, //flase直接隐藏图形
                          xAxisIndex: [0],
                          left: '9%', //滚动条靠左侧的百分比
                          bottom: -5,
                          start: 10,//滚动条的起始位置
                          end: 20 //滚动条的截止位置(按比例分割你的柱状图x轴长度)
                      }],
                xAxis: {
      
                    name:"食材",
                    type: 'category',
                    data:[
                    		{
      % for item in items %}
                            	"{
      { item[0]}}",
                        	{
      % endfor %}
                       ]},
                yAxis: {
      
                    name:"数量",
                    type: 'value',
                    axisLabel : {
      
                    formatter: '{value} 种'}
                },
                series: [
                        {
      
                            type: 'line',	//line折线图。bar柱形图
                            data:[{
      % for item in items %}
                            		"{
      { item[1]}}",
                        			{
      % endfor %}],
                            itemStyle:{
      normal: {
      color:"#31b0d5"}}
                        }
                    ]
                };
            myChart.setOption(option);// 基于准备好的dom,初始化 echarts 实例并绘制图表。
     script>
body>
html>

Jinja2 模板的实例(加载数据库的数据到html)

 data:[
       {
     % for item in items %}
           "{
     { item[0]}}",	# item[0]这里是加载数据表的第一列数据,item[1]是第一列
       {
     % endfor %}
 ]},

五、运行项目Flask.py

Flask+MySQL+Echarts:实现数据可视化_第2张图片
在浏览器输入 http://127.0.0.1:5000/echarts 可以看到:
(在echarts.html的series的type设置了line折线图)
Flask+MySQL+Echarts:实现数据可视化_第3张图片
(在echarts.html的series的type设置了bar柱形图)
Flask+MySQL+Echarts:实现数据可视化_第4张图片

你可能感兴趣的:(python,数据可视化,python,mysql,数据库,flask)