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

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

前言

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

项目结构

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

前端部分

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

    
   
    
    
    
    
    
   
        
    
        
    随机刷新
    
   
    

Flask 实现

2. 创建 `app.py` 文件：
```python
from flask import Flask, jsonify
from flask_cors import *
import random
app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False
CORS(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)

3. 运行：```bash python app.py

---
#### Express 实现
1. 安装依赖：```bash
npm install express

2. 创建 app.js 文件：

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);
});

3. 运行：```bash node app.js

---
#### Beego 实现
1. 安装 Go 和 Beego：```bash
go get -u https://github.com/astaxie/beego

2. 创建 app.go 文件：

package main
import (
    "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")
}

3. 运行：```bash go run app.go

---
#### 项目效果
1. 数据展示：页面加载后自动显示各科目成绩柱状图。
2. random 刷新：点击按钮后，数据会重新随机生成并展示。
3. 跨域支持：前后端互通无阻。
---
#### 结语
本文通过 ECharts 实现了一个简单的学科成绩可视化页面，并分别使用 Flask、Express、Beego 搭建后台 API。感谢您的阅读，欢迎留言讨论！

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