博客
关于我
echarts异步请求后台数据(flask, express, beego版本)
阅读量:808 次
发布时间:2019-03-25

本文共 3095 字,大约阅读时间需要 10 分钟。

使用ECharts搭建数据可视化案例及前后端搭建( Flask, Express, Beego)

前言

ECharts 是一个强大的可视化 JS 库,功能强大且易于使用。通过本文案例,大家将从头到尾学习如何用 ECharts 实现一个简单的数据可视化页面,并通过 Flask、Express、Beego 三个框架分别搭建后台服务器。


项目结构

项目主要包含以下几个部分:

  • Frontend(前端):用于创建数据可视化页面,包括数据展示和数据请求功能。
  • Backend(后端):通过 Flask、Express、Beego 分别搭建后台 API,提供数据随机生成接口。

  • 前端部分

    前端页面主要包含以下功能:

  • 依赖文件加载:加载 ECharts 和 jQuery 函数文件。
  • 数据请求:通过 AJAX 获取后台生成的数据。
  • 数据展示:使用 ECharts 绘制柱状图,显示各科目成绩。
  • 自动刷新:页面一刷新就会重新获取数据。
  •     
    成绩可视化

    Flask 实现

  • 安装依赖:```bashpip install flask flask-cors
  • 2. 创建 `app.py` 文件:```pythonfrom flask import Flask, jsonifyfrom flask_cors import *import randomapp = Flask(__name__)app.config['JSON_AS_ASCII'] = FalseCORS(app, supports_credentials=True)@app.route('/random')def get_random_data():    subjects = ['Chinese', 'Mathematics', 'English', 'Physics', 'History',                'Politics', 'Geography', 'Chemistry', 'Biology']    data = {s: random.randint(1, 100) for s in subjects}    return jsonify(data)if __name__ == '__main__':    app.run(host='0.0.0.0', port=3000)
    1. 运行:```bashpython app.py
    2. ---#### Express 实现1. 安装依赖:```bashnpm install express
      1. 创建 app.js 文件:
      2. const express = require('express');const app = express();const allowCross = function(req, res, next) {    res.header('Access-Control-Allow-Origin', '*');    next();};app.use(allowCross);function getRandomInt(max) {    return Math.floor(Math.random() * Math.floor(max));}app.get('/random', function(req, res) {    const subjects = ['Chinese', 'Mathematics', 'English', 'Physics', 'History',                      'Politics', 'Geography', 'Chemistry', 'Biology'];    const scores = {};        for (const subject of subjects) {        scores[subject] = getRandomInt(101);    }        res.json(scores);});const server = app.listen(3000, function() {    const port = server.address().port;    console.log('访问地址为 http://127.0.0.1:%s', port);});
        1. 运行:```bashnode app.js
        2. ---#### Beego 实现1. 安装 Go 和 Beego:```bashgo get -u https://github.com/astaxie/beego
          1. 创建 app.go 文件:
          2. package mainimport (    "encoding/json"    "fmt"    "math/rand"    "github.com/astaxie/beego"    "github.com/astaxie/beego/context"    "github.com/astaxie/beego/plugins/cors")func main() {    beego.InsertFilter("*", beego.BeforeRouter, cors.Allow(&cors.Options{        AllowAllOrigins: true,    }))    beego.Get("/random", func(c *context.Context) {        scores := make(map[string]int)        subjects := []string{            "Chinese", "Mathematics", "English", "Physics",             "History", "Politics", "Geography", "Chemistry", "Biology"        }                for _, subject := range subjects {            scores[subject] = rand.Intn(101)        }                data, err := json.MarshalIndent(scores, "", "\t")        if err != nil {            fmt.Printf("错误:%v\n", err)            return        }                c.Output.JSON(data, true, true)    })    beego.Run("localhost:3000")}
            1. 运行:```bashgo run app.go
            2. ---#### 项目效果1. 数据展示:页面加载后自动显示各科目成绩柱状图。2. random 刷新:点击按钮后,数据会重新随机生成并展示。3. 跨域支持:前后端互通无阻。---#### 结语本文通过 ECharts 实现了一个简单的学科成绩可视化页面,并分别使用 Flask、Express、Beego 搭建后台 API。感谢您的阅读,欢迎留言讨论!

    转载地址:http://vfayk.baihongyu.com/

    你可能感兴趣的文章
    MySQL原理简介—1.SQL的执行流程
    查看>>
    mysql参考触发条件_MySQL 5.0-触发器(参考)_mysql
    查看>>
    MySQL及navicat for mysql中文乱码
    查看>>
    MySqL双机热备份(二)--MysqL主-主复制实现
    查看>>
    mysql启动以后会自动关闭_驾照虽然是C1,一直是开自动挡的车,会不会以后就不会开手动了?...
    查看>>
    mysql启动和关闭外键约束的方法(FOREIGN_KEY_CHECKS)
    查看>>
    Mysql启动失败解决过程
    查看>>
    MySQL启动失败:Can't start server: Bind on TCP/IP port
    查看>>
    mysql启动报错
    查看>>
    mysql启动报错The server quit without updating PID file几种解决办法
    查看>>
    mysql和oorcale日期区间查询【含左右区间问题】
    查看>>
    MySQL和SQL入门
    查看>>
    mysql在centos下用命令批量导入报错_Variable ‘character_set_client‘ can‘t be set to the value of ‘---linux工作笔记042
    查看>>
    Mysql在Linux运行时新增配置文件提示:World-wrirable config file ‘/etc/mysql/conf.d/my.cnf‘ is ignored 权限过高导致
    查看>>
    Mysql在Windows上离线安装与配置
    查看>>
    MySQL在渗透测试中的应用
    查看>>
    Mysql在离线安装时启动失败:mysql服务无法启动,服务没有报告任何错误
    查看>>
    Mysql在离线安装时提示:error: Found option without preceding group in config file
    查看>>
    MySQL基于SSL的主从复制
    查看>>
    MySQL基础day07_mysql集群实例-MySQL 5.6
    查看>>