Flask | Echart | 服务器部署 | 记录一次制作一个数据可视化网页并部署到个人云服务器学习过程

最新推荐文章于 2025-03-10 17:17:20 发布

onemsg 徽章

最新推荐文章于 2025-03-10 17:17:20 发布

阅读量3.7k

点赞数 2

分类专栏： Projects 文章标签： Flask Echarts Python uwsgi 数据可视化

本文链接：https://blog.youkuaiyun.com/OnedayIlove/article/details/88376262

版权

本文记录了作者从零开始使用Flask、Echarts和Python开发数据可视化网页，然后将其部署到个人云服务器的过程。涉及到HTML/CSS/JS、Flask框架、Echarts图表库以及服务器部署技术如uWSGI和Nginx。通过实践，作者强调了在学习过程中快速做出最小化可行产品的价值，并分享了在云服务器部署中遇到的问题及解决经验，包括文件上传、环境差异和配置文件的调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

前几天成功尝试了从零开始制作一个基于百度Echart的动态图表，并放到了自己的百度云服务器上，最终可以在浏览器上通过输入主机IP地址观看。期间涉及到的有HTML/CSS/JS、Echarts、Flask、Linux相关使用，在此记录一下自己的学习历程。虽然简单，但在此基础做出更多。

最终效果图

有个词叫“精益创业” (lean startup), 它的思想是：你并不需要完全准备好在上场，你可以边上场边准备或先上场再适应，虽然一开始可能会摔得鼻青脸肿，但进步反而会很快。我再学H/S/J和Flask都是大致先看完快速入门文档，然后就开始做了，在做的过程中遇到不懂的地方再去翻查教程，这种过程就是快速做出最小化可行产品，做出的东西虽然简单，但让你极快地摸清了整体架构/流程。

在线学习资源

HTML/CSS/JavaScript : w3school

Flask : Flask中文文档 Flask英文文档

Echart : Echart官网

uWSCI : USGI中文文档

Nginx : Nginx中文文档

云服务器部署参考 : 阿里云部署 Flask + WSGI + Nginx 详解 ——Ray

其他 :

当你在浏览器中输入 google.com 并且按下回车之后发生了什么？

python Web开发你要理解的WSGI & uwsgi详解

开发流程

在本地计算机创建Flask项目，这里我用的开发工具是VS Code。
开始创建所有所需的文件。
调试以至于达到预期。
上传到你的云服务器里。
创建Flask项目，把上传的文件移动到这里。
调试运行。
配置WSGI和Nginx，以至于能在浏览器输入服务器的IP地址访问查看。
成功。

经验 / 提示

第5步，用SFTP上传，把整个Flask目录做成个压缩包，这样上传方便也快。
上传的文件不要包含你为Flask项目创建的Python虚拟环境文件夹，这很可能会因为你电脑的python版本和云服务器上的python版本不一致而导致错误（同样windows和linux环境下也不一样）当然也可以试试把服务器的python版本升级到和你电脑的版本一致，友情提示这个是坑，看下面的剧情。我是用服务器的自带python3.5创建了一个Flask项目，并把上传的Flask各个文件移动到这里。
云服务器上uWSGI安装失败问题。我的服务器是ubuntu16.04,python3.5。安装uWSGI前需要先安装python3-dev，

看这个表，也就是说python3.6和python3.7的python3-dev只能在ubuntu18版本才能用，你要知道大多数服务器ubuntu版本都是ubuntu 16或14（你只能用python3.5-dev)，这就是我不建议你升级服务器python版本的原因，至少在这一步上，它会导致你pip install uwsgi 失败！
用Echart制作图表时，你可以用python很方便地把你下载的数据处理成你所需要的json格式。
多查点资料，搞清楚uWSGI 和 Nginx 配置文件各个参数属性的作用，别人的配置参数仅供参考，你需要配置一个最适合自己的。
如果你不喜欢linux里的vim编辑器，试试在本机用vs code 写配置文件，再用stfp上传到服务器上。

我的文件目录

代码清单

flaskr.py

from flask import Flask,render_template
app = Flask(__name__)

@app.route('/')
def web_E_DV():
    return render_template('Economy_DataVisualization.html')
    
if __name__ == '__main__':
    app.run(host="0.0.0.0")

Economy_DataVisualization.html

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
    <title>1998-2017全国宏观经济指标</title>
    <meta name="author" content="奥创没有电">
    <meta name="Description" content="一个基于Echart的数据可视化，动态的显示中国各省份从1998年开始到2017年各项宏观经济指标，使人们对这些变话和对比一目了然。
        数据下载自国家数据，并做进一步的格式处理。
">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%; position: relative; -ms-user-select: none; -webkit-tap-highlight-color: transparent;"
        _echarts_instance_="ec_1551692589213">
        <div style="border-width: 0px; margin: 0px; padding: 0px; width: 1536px; height: 747px; overflow: hidden; position: relative; cursor: default;"><canvas
                width="1920" height="933" style="border-width: 0px; margin: 0px; padding: 0px; left: 0px; top: 0px; width: 1536px; height: 747px; position: absolute; -ms-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
                data-zr-dom-id="zr_0"></canvas></div>
        <div style="font: 14px/21px Microsoft YaHei; padding: 5px; border-radius: 4px; border: 0px solid rgb(51, 51, 51); transition:left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); left: 746.4px; top: 520.8px; color: rgb(255, 255, 255); display: none; white-space: nowrap; position: absolute; z-index: 9999999; font-size-adjust: none; font-stretch: normal; pointer-events: none; background-color: rgba(50, 50, 50, 0.7);">山东<br><span
                style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#d48265;"></span>第一产业:
            3,588.28<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#91c7ae;"></span>第二产业:
            21,238.49<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#749f83;"></span>第三产业:
            14,343.14</div>
       
    </div>
    <!-- <script src='echarts.min.js' type="text/javascript"></script> -->
    <script src='https://echarts.baidu.com/dist/echarts.min.js' type="text/javascript"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        var dataMap = {};
        function dataFormatter(obj) {
            var pList = ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆'];
            var temp;
            for (var year = 1998; year <= 2017; year++) {
                var max = 0;
                var sum = 0;
                temp = obj[year];
                for (var i = 0, l = temp.length; i < l; i++) {
                    max = Math.max(max, temp[i]);
                    sum += temp[i];
                    obj[year][i] = {
                        name: pList[i],
                        value: temp[i]
                    }
                }
                obj[year + 'max'] = Math.floor(max / 100) * 100;
                obj[year + 'sum'] = sum;
            }
            return obj;
        }

        dataMap.dataGDP = dataFormatter({ 2017: [28014.94, 18549.19, 34016.32, 15528.42, 16096.21, 23409.24, 14944.53, 15902.68, 30632.99, 85869.76, 51768.26, 27018.0, 32182.09, 20006.31, 72634.15, 44552.83, 35478.09, 33902.96, 89705.23, 18523.26, 4462.54, 19424.73, 36980.22, 13540.83, 16376.34, 1310.92, 21898.81, 7459.9, 2624.83, 3443.56, 10881.96], 2016: [25669.13, 17885.39, 32070.45, 13050.41, 18128.1, 22246.9, 14776.8, 15386.09, 28178.65, 77388.28, 47251.36, 24407.62, 28810.58, 18499.0, 68024.49, 40471.79, 32665.38, 31551.37, 80854.91, 18317.64, 4053.2, 17740.59, 32934.54, 11776.73, 14788.42, 1151.41, 19399.59, 7200.37, 2572.49, 3168.59, 9649.7], 2015: [23014.59, 16538.19, 29806.11, 12766.49, 17831.51, 28669.02, 14063.13, 15083.67, 25123.45, 70116.38, 42886.49, 22005.63, 25979.82, 16723.78, 63002.33, 37002.16, 29550.19, 28902.21, 72812.55, 16803.12, 3702.76, 15717.27, 30053.1, 10502.56, 13619.17, 1026.39, 18021.86, 6790.32, 2417.05, 2911.77, 9324.8], 2014: [21330.83, 15726.93, 29421.15, 12761.49, 17770.19, 28626.58, 13803.14, 15039.38, 23567.7, 65088.32, 40173.03, 20848.75, 24055.76, 15714.63, 59426.59, 34938.24, 27379.22, 27037.32, 67809.85, 15672.89, 3500.72, 14262.6, 28536.66, 9266.39, 12814.59, 920.83, 17689.94, 6836.82, 2303.32, 2752.1, 9273.46], 2013: [19800.81, 14442.01, 28442.95, 12665.25, 16916.5, 27213.22, 13046.4, 14454.91, 21818.15, 59753.37, 37756.59, 19229.34, 21868.49, 14410.19, 55230.32, 32191.3, 24791.83, 24621.67, 62474.79, 14449.9, 3177.56, 12783.26, 26392.07, 8086.86, 11832.31, 815.67, 16205.45, 6330.69, 2122.06, 2577.57, 8443.84], 2012: [17879.4, 12893.88, 26575.01, 12112.83, 15880.58, 24846.43, 11939.24, 13691.58, 20181.72, 54058.22, 34665.33, 17212.05, 19701.78, 12948.88, 50013.24, 29599.31, 22250.45, 22154.23, 57067.92, 13035.1, 2855.54, 11409.6, 23872.8, 6852.2, 10309.47, 701.03, 14453.68, 5650.2, 1893.54, 2341.29, 7505.31], 2011: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582.0, 19195.69, 49110.27, 32318.85, 15300.65, 17560.18, 11702.82, 45361.85, 26931.03, 19632.26, 19669.56, 53210.28, 11720.87, 2522.66, 10011.37, 21026.68, 5701.84, 8893.12, 605.83, 12512.3, 5020.37, 1670.44, 2102.21, 6610.05], 2010: [14113.58, 9224.46, 20394.26, 9200.86, 11672.0, 18457.27, 8667.58, 10368.6, 17165.98, 41425.48, 27722.31, 12359.33, 14737.12, 9451.26, 39169.92, 23092.36, 15967.61, 16037.96, 46013.06, 9569.85, 2064.5, 7925.58, 17185.48, 4602.16, 7224.18, 507.46, 10123.48, 4120.75, 1350.43, 1689.65, 5437.47], 2009: [12153.03, 7521.85, 17235.48, 7358.31, 9740.25, 15212.49, 7278.75, 8587.0, 15046.45, 34457.3, 22990.35, 10062.82, 12236.53, 7655.18, 33896.65, 19480.46, 12961.1, 13059.69, 39482.56, 7759.16, 1654.21, 6530.01, 14151.28, 3912.68, 6169.75, 441.36, 8169.8, 3387.56, 1081.27, 1353.31, 4277.05], 2008: [11115.0, 6719.01, 16011.97, 7315.4, 8496.2, 13668.58, 6426.1, 8314.37, 14069.86, 30981.98, 21462.69, 8851.66, 10823.01, 6971.05, 30933.28, 18018.53, 11328.92, 11555.0, 36796.71, 7021.0, 1503.06, 5793.66, 12601.23, 3561.56, 5692.12, 394.85, 7314.58, 3166.82, 1018.62, 1203.92, 4183.21], 2007: [9846.81, 5252.76, 13607.32, 6024.45, 6423.18, 11164.3, 5284.69, 7104.0, 12494.01, 26018.48, 18753.73, 7360.92, 9248.53, 5800.25, 25776.91, 15012.46, 9333.4, 9439.6, 31777.01, 5823.41, 1254.17, 4676.13, 10562.39, 2884.11, 4772.52, 341.43, 5757.29, 2703.98, 797.35, 919.11, 3523.16], 2006: [8117.78, 4462.74, 11467.6, 4878.61, 4944.25, 9304.52, 4275.12, 6211.8, 10572.24, 21742.05, 15718.47, 6112.5, 7583.85, 4820.53, 21900.19, 12362.79, 7617.47, 7688.67, 26587.76, 4746.16, 1065.67, 3907.23, 8690.24, 2338.98, 3988.14, 290.76, 4743.61, 2277.35, 648.5, 725.9, 3045.26], 2005: [6969.52, 3905.64, 10012.11, 4230.53, 3905.03, 8047.26, 3620.27, 5513.7, 9247.66, 18598.69, 13417.68, 5350.17, 6554.69, 4056.76, 18366.87, 10587.42, 6590.19, 6596.1, 22557.37, 3984.1, 918.75, 3467.72, 7385.1, 2005.42, 3462.73, 248.8, 3933.72, 1933.98, 543.32, 612.61, 2604.19], 2004: [6033.21, 3110.97, 8477.63, 3571.37, 3041.07, 6672.0, 3122.01, 4750.6, 8072.83, 15003.6, 11648.7, 4759.3, 5763.35, 3456.7, 15021.84, 8553.79, 5633.24, 5641.94, 18864.62, 3433.5, 819.66, 3034.58, 6379.63, 1677.8, 3081.91, 220.34, 3175.58, 1688.49, 466.1, 537.11, 2209.09], 2003: [5007.21, 2578.03, 6921.29, 2855.23, 2388.38, 6002.54, 2662.08, 4057.4, 6694.23, 12442.87, 9705.02, 3923.11, 4983.67, 2807.41, 12078.15, 6867.7, 4757.45, 4659.99, 15844.64, 2821.11, 713.96, 2555.72, 5333.09, 1426.34, 2556.02, 185.09, 2587.72, 1399.83, 390.2, 445.36, 1886.35], 2002: [4315.0, 2150.76, 6018.28, 2324.8, 1940.94, 5458.22, 2348.54, 3637.2, 5741.03, 10606.85, 8003.67, 3519.72, 4467.55, 2450.48, 10275.5, 6035.48, 4212.82, 4151.54, 13502.42, 2523.73, 642.73, 2232.86, 4725.01, 1243.43, 2312.82, 162.04, 2253.39, 1232.03, 340.65, 377.16, 1612.65], 2001: [3707.96, 1919.09, 5516.76, 2029.53, 1713.81, 5033.08, 2120.35, 3390.1, 5210.12, 9456.84, 6898.34, 3246.71, 4072.85, 2175.68, 9195.04, 5533.01, 3

最低0.47元/天解锁文章