Tornado+ Echarts连接数据库显示数据（Python）

##Tornado+ Echarts连接数据库显示数据（Python）
首先,需要Python获取数据库的值

#coding=utf-8
#连接数据库测试
import  pymysql

def OpenMysql(host,user,password,db):
    db = pymysql.connect(host=host, user=user, password=password, db=db,
                         cursorclass=pymysql.cursors.DictCursor)
    return db
def Select_All(db):
    cur = db.cursor()
    sql_dict = {}
    # 查询操作
    sql = "select * from jz2_low"
    try:
        cur.execute(sql)
        result = cur.fetchall()
        return result
    except Exception as e:
        print("查询全部数据错误", e)
    finally:
        db.close()
def RunSqlShell(db,shell):
    cur = db.cursor()
    sql_dict = {}
    # 查询操作
    sql = shell
    try:
        cur.execute(sql)
        result = cur.fetchall()
        return result
    except Exception as e:
        print("RunShellError：", e)
    finally:
        db.close()

在需要调用的地方

import OpenMysql,Select_All
db = OpenMysql("192.168.10.229", "root", "123456", "perforamance")
result = Select_All(db)

Tornado项目首先需要建立一个URL路由表，比如我的路由表里

app = Application(
    [
        (r'/', IndexHandler),
        (r'/loadscripts',LoadScripts),
        (r'/StudyManage',StudyHandler),
        (r'/ExplainManage',ExplainHandler),
        (r'/uploadFile/([^/]+)', GetUpload),
        (r'/uploadFile', GetUpload),
        (r'/LoadStudy',LoadStudy),
        (r'/Study/([^/]+)', GetStudyUpload),
        (r'/Study', GetStudyUpload),
        (r'/Port', Port),
        #这是路由到显示数据库的路由
        (r'/Performance',PerformanceControl),
    ],

数据库有了以后开始写Post与get方法

class PerformanceControl(RequestHandler):
    def get(self):
        self.render("ShowData.html")
    def post(self):
        set_default_header(self)
        db = OpenMysql("192.168.10.229", "root", "123456", "perforamance")
        result = Select_All(db)
        re,di=ChangeData(result)
        self.write(re)
        self.finish()

在HTML页面里调用：

//display:inline-block是为了保证两个DIV可以并列在同一行显示
 <button type="button" class="btn btn-info" onclick="Showdatabase()" method="get">刷新</button>
  	<div>
    <div id="main" style="width: 600px;height:400px;display:inline-block;"></div>
     <div id="main1" style="width: 600px;height:400px;display:inline-block;"></div>
    </div>
    <script type="text/javascript">
       function Showdatabase() {
        $.ajax({
              method: "post",
              url: '/ShowData_jz3d',
              success: function(data){
              // 我这里是返回的一个JSON{"CPU":[1,2,3],"Drawcall":[1,2,3].....}
    alert("Data Loaded: " + data['CPU']); 
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        option = {
    // Make gradient line here
    visualMap: [{
        show: false,
        type: 'continuous',
        seriesIndex: 0,
        min: 0,
        max: 400
    }, {
        show: false,
        type: 'continuous',
        seriesIndex: 1,
        dimension: 0,
        min: 0,
        max: 400 - 1
    }],
    legend: [{data:['FPS_AVG','FPS_25','PSS_MAX','PSS_AVG']},
    ],
    tooltip: {
        trigger: 'axis'
    },
    xAxis: [{
         type: 'category',
        boundaryGap: false,
        data: data['Data']
    }, {
         type: 'category',
        boundaryGap: false,
        data: data['Data'],
        gridIndex: 1
    }],
    yAxis: [{
        splitLine: {show: true}
    }, {
        splitLine: {show: true},
        gridIndex: 1
    }],
    grid: [{
        bottom: '60%'
    }, {
        top: '60%'
    }],
    series: [{
        name:'FPS_AVG',
        type: 'line',
        showSymbol: false,
        data: data['FPS_AVG'],
    },{ name:'FPS_25',
        type: 'line',
        showSymbol: false,
        data: data['FPS_25'],
    },  {
        name:'PSS_AVG',
        type: 'line',
        showSymbol: false,
        data: data['PSS_AVG'],
        xAxisIndex: 1,
        yAxisIndex: 1
    },{ name:'PSS_MAX',
        type: 'line',
        showSymbol: false,
        data: data['PSS_MAX'],
        xAxisIndex: 1,
        yAxisIndex: 1
    }
    ]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        var myChart1 = echarts.init(document.getElementById('main1'));
option1 = {
    title: [{
        left: 'center',
        text: 'CPU消耗'
    }, {
        top: '55%',
        left: 'center',
        text: 'Drawcall'
    }],
    tooltip: {
        trigger: 'axis'
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        data: data['Data']
        //data['Data']是一个数组形式类似[1,2,3,4]这种，用于X轴显示
    }, {
        type: 'category',
        boundaryGap: false,
        data: data['Data'],
         //data['Data']是一个数组形式类似[1,2,3,4]这种，用于X轴显示
        gridIndex: 1
    }],
    yAxis: [{
        splitLine: {show: true}
    }, {
        splitLine: {show: true},
        //是否显示网格
        gridIndex: 1
    }],
    grid: [{
        bottom: '60%'
    }, {
        top: '60%'
    }],
    series: [{
        type: 'line',
        showSymbol: false,
        data: data['CPU']
         //data['CPU']是一个数组形式类似[1,2,3,4]这种，用于Y轴显示
    }, {
        type: 'line',
        showSymbol: false,
        data: data['Drawcall'],
        //data['Drawcall']是一个数组形式类似[1,2,3,4]这种，用于Y轴显示
        xAxisIndex: 1,
        yAxisIndex: 1
    }]
};
myChart1.setOption(option1);

 } 
    })}        
    </script>

这里与本篇文章无关

喜欢二次元动漫的小伙伴可以微信扫一扫关注一下哟，点赞关注，鼓励一下博主呦