肆拾贰- JS 告诉你，到底你是贫穷还是富贵

最新推荐文章于 2021-05-19 05:57:18 发布

BerryBC

最新推荐文章于 2021-05-19 05:57:18 发布

阅读量372

点赞数

分类专栏：三世书记录文章标签： js html

本文链接：https://blog.csdn.net/BerryBC/article/details/106222923

版权

三世书记录专栏收录该内容

66 篇文章 4 订阅

订阅专栏

0. 引用

本内容继续引用 EChart / JQuery 以及 Bootstrap。

1. 测试你是贫穷还是富贵

请回答以下问题，请问你觉得最近的物价是上升了还是下降了呢~？

物价上涨了！
物价下降了！

答案是上涨的
恭喜，你是属于贫穷阶层的
答案是下降的
老板，能留下你的联系方式么？

2. Tell me why！

首先涉及一个超级简单的供给曲线，如果懒得翻书的话可以直接看以下链接：
https://wenku.baidu.com/view/bb23f2868762caaedd33d4a9.html
更加懒得打开链接的可以直接看一下图（图片来源于网络）：

不理解上图什么意思？没关系，其实跟下面说的没有直接关系，因为我们即将模拟的只是一个简单且短期的模型，将会与供求平衡关系不大。

3. 我们首先得创造一个城市，以便观察它

一个城市的核心是什么？核心是人！

人(市民)
我们创造了一堆人，他们居住在一个城市，所以称他们为 市民 ，而这些市民全部的作息、兴趣千遍一律，不同点只有他们的工资，还有他们的存款，他们的行为模式也是千篇一律的，主要有以下情况：
- 市民们不会因为短期的工资下降而降低自己的消费水平；
- 为了维持他们自己的存款在某一固定水平，他们会主动下降 消费水平。
距个栗子：
- 某市民 A 月薪 1万，存款 100万，每个月花光 1万收入。
- 可是某一天告诉他，工资这个月只拿到 5千，他还是照样花 1万。
- 但他某天发现他存款只剩下 50万了，他开始慌了，只按 5千一个月来花。

然后既然有人赚钱，那还是得花钱啊！所以我们创造了 开销。

开销
我们这个城市有且只有 3种 开销，分别是：
- 高消费 ( 追求人生更高的层次 )
- 中消费 ( 普通的消遣娱乐 )
- 低消费 ( 基础生存吃喝 )
对应人类需求的吃喝 (低消费) 、玩 ( 中消费 ) 、乐 ( 高消费 )。
至于是谁玩谁，那就不知道了。

各种级别的开销，均会因应前来消费的人数而变动价格，越多的人来消费，该级别的消费水平将会越高，越少人来消费，就会降价。
举个栗子：
- 高消费商店的消费市民本来只有10个，结果现在忽然变成了20个，相应高消费商店的对应消费单价将会上升；
- 原本前往中消费商店的市民只有200个，结果现在只剩下100个了，相应的人中消费商店就会降价以祈求更多的市民前往消费。

4. 这个城市怎么运行呢？

首先，我们给每个市民先模拟一个正常日子下的存款，依据存款设立一定百分比的收入( 加上某些随机因素 )。
然后，就让他们自己在城市中随心生存呗~

5. 顺利的人生并没有趣

太顺利的人生就像一滩死水，于是我们决定来点刺激的。
我们设定两个按钮，在按第一个按钮的时候，城市里面每个人能拿到的收入只有平常的60%！
做人总得给与别人希望对吧，于是我们第二个按钮，就是恢复平日的收入水平。

6. 让城市运作起来吧！

正常的日子

在正常的日子里面，可以看出，基本生活是波澜不惊的，各消费水平的物价均处以一种非常稳定的水平。
但你有没有看到，每个图表的右方，均有一个 出事期间 的标签，预示着不好的未来即将到来。
变天了

坏未来 终于来到了！！
在坏未来之下，我们明显看出：
- 转变为低消费的市民大幅上升；
- 低消费的物价因为大量市民转为低消费而小幅上涨 ( 因为原本低消费市民人数较多，所以升幅不大 ) ；
- 高消费的市民人数大幅减少；
- 高消费的物价大幅下降；
- 整个城市总消费金额明显减少。

坏未来

雨过天晴

慢慢恢复到未出事前的水平，生活重回过往！

7. 后记

上述模拟其实是一种异常乐观的模拟，主要有以下原因：

市民们的收入实际上并不能在雨过天晴后真正恢复正常水平；
消费人数以及消费价格并未实际服从供求关系变化；
整个城市总收入下降并未反馈在市民收入上；
供给物并无设置别的替代模式；
市民逃离城市；
等等等等

基于上述条件，如果我们全部都设到模型中去，我们将会得到一个在出事后不久就支离破碎的城市，人们甚至连低消费都消费不起，都跑去借钱了。

8. 后记之后

话说可能没人关注，如果一个陨石砸下来会死 一千人，整个城市的人疏散导致经济下滑，几乎每个人都会选择疏散这个城市的人。
但我想说的是，每个人都很容易关注直接砸死的一千人，但因为经济下滑而因破产、靠借贷生活无法还钱、生产链断裂而无法获取生存物资的人，可能有千千万万人，这些人也很有可能会在往后的数个月甚至数年内死掉。
我们是否因为拯救直接死掉的一千人，而杀掉我们没有直接动手的千千万万人呢？
或许你们可以看看以下这条新闻：
WFP新闻

9. 代码

JS

/*
 * @Descripttion: 城市模拟器
 * @Author: BerryBC
 * @Date: 2020-05-12 21:44:16
 * @LastEditors: BerryBC
 * @LastEditTime: 2020-05-19 00:13:56
 */
var chartTotalSpend = echarts.init(document.getElementById('divCanTotalSpend'));
var chartTypeOfConsumers = echarts.init(document.getElementById('divCanTypeOfConsumers'));
var chartNumberOfConsumers = echarts.init(document.getElementById('divCanNumberOfConsumers'));


// 模拟运行天数
var intDay = 0;

// 市民数量
var intNumOfCitizen = 5000;
// 市民工资与存款结构
var objCitizenElement = { dblOriginalDeposit: 100000, dblDeposit: 100000, dblIncome: 10000 };
// 市民数组
var arrCitizien = [];
// 有某种状况下的工资发放系数
var dblPaymentCoefficient = 1;

// 总消费规模(金钱)
var dblTotalSpend = 0;
// 消费模式种类数
var intNumberOfConsumptionCategories = 3;
// 消费门槛
var arrOriginalConsumptionThreshold = [1000, 2000, 4000];
var arrConsumptionThreshold = [1000, 2000, 4000];
// 消费人数
var arrOriginalNumberOfConsumers = [0, 0, 0];
var arrNumberOfConsumers = [0, 0, 0];

// 初始化市民消费情况
for (var intI = 0; intI < intNumOfCitizen; intI++) {
    // 随机化市民工资情况
    var dblTmpDeposit = Math.random() * 100000;
    var dblTmpIncome = dblTmpDeposit * 0.045 + Math.random() * (dblTmpDeposit * 0.05);
    arrCitizien.push({ dblOriginalDeposit: dblTmpDeposit, dblDeposit: dblTmpDeposit, dblIncome: dblTmpIncome });
    // 该市民属于哪种消费模式
    if (dblTmpIncome >= arrConsumptionThreshold[2]) {
        arrOriginalNumberOfConsumers[2]++;
        arrNumberOfConsumers[2]++;
    } else if (dblTmpIncome >= arrConsumptionThreshold[1]) {
        arrOriginalNumberOfConsumers[1]++;
        arrNumberOfConsumers[1]++;
    } else {
        arrOriginalNumberOfConsumers[0]++;
        arrNumberOfConsumers[0]++;
    };
    dblTotalSpend += dblTmpIncome;
};



// 画图准备
var intAreaBegin = 100000;
var intAreaEnd = 100001;
var arrDay = [];
var arrTotalSpend = [];
var arrTypeOfConsumers = [
    [],
    [],
    []
];
var arrChartNumberOfConsumers = [
    [],
    [],
    []
];

$(function() {
    // 开始模拟
    $('#btnGo')[0].onclick = function() {
        setInterval(RunBaby, 100);
    };
    // 开始出事了
    $('#btnBegan')[0].onclick = function() {
        dblPaymentCoefficient = 0.5;
        intAreaBegin = intDay;
    };
    // 日子回复正常了
    $('#btnBack')[0].onclick = function() {
        dblPaymentCoefficient = 1;
        intAreaEnd = intDay;
    };
});

// 人生无常的模拟一下
function RunBaby() {
    arrNumberOfConsumers = [0, 0, 0];
    dblTotalSpend = 0;
    // 遍历每个市民模拟状况
    for (var intI = 0; intI < intNumOfCitizen; intI++) {
        // 模拟市民花费金钱情况
        var dblSpend = (arrCitizien[intI].dblDeposit / arrCitizien[intI].dblOriginalDeposit * 0.5 + 0.5) * arrCitizien[intI].dblIncome + (Math.random() - 0.5) * arrCitizien[intI].dblIncome * 0.002;
        // 模拟市民存款情况
        arrCitizien[intI].dblDeposit = arrCitizien[intI].dblDeposit - dblSpend + arrCitizien[intI].dblIncome * dblPaymentCoefficient;
        if (dblSpend >= arrConsumptionThreshold[2]) {
            arrNumberOfConsumers[2]++;
        } else if (dblSpend >= arrConsumptionThreshold[1]) {
            arrNumberOfConsumers[1]++;
        } else {
            arrNumberOfConsumers[0]++;
        };
        // 社会消费总额
        dblTotalSpend += dblSpend;
    };
    for (var intI = 0; intI < intNumberOfConsumptionCategories; intI++) {
        // 各种消费情况
        arrConsumptionThreshold[intI] = arrOriginalConsumptionThreshold[intI] + arrOriginalConsumptionThreshold[intI] * 0.2 * (arrNumberOfConsumers[intI] / arrOriginalNumberOfConsumers[intI] - 1)
    };


    // Times fly~
    intDay++;
    // 绘制 Chart 图
    DrawChart();
};

function DrawChart() {
    // 画图需要
    arrDay.push(intDay);
    arrTotalSpend.push(dblTotalSpend);
    arrTypeOfConsumers[0].push(arrConsumptionThreshold[0]);
    arrTypeOfConsumers[1].push(arrConsumptionThreshold[1]);
    arrTypeOfConsumers[2].push(arrConsumptionThreshold[2]);
    arrChartNumberOfConsumers[0].push(arrNumberOfConsumers[0]);
    arrChartNumberOfConsumers[1].push(arrNumberOfConsumers[1]);
    arrChartNumberOfConsumers[2].push(arrNumberOfConsumers[2]);

    // 绘制 市民们总消费金额 的曲线
    optTotalSpend = {
        title: {
            text: '市民们总消费金额'
        },
        xAxis: {
            type: 'category',
            data: arrDay,
            boundaryGap: false,
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '消费总数',
            type: 'line',
            data: arrTotalSpend,
            smooth: true,
            // lineStyle: {
            //     color: "green"
            // },
            // itemStyle: {
            //     color: "green"
            // },
            markArea: {
                color: "red",
                data: [
                    [{
                        name: '出事期间',
                        xAxis: intAreaBegin
                    }, {
                        xAxis: intAreaEnd
                    }]
                ]
            }
        }]
    };
    chartTotalSpend.setOption(optTotalSpend);

    // 绘制 不同消费种类物价 的曲线
    optTypeOfConsumers = {
        title: {
            text: '不同消费种类物价'
        },
        xAxis: {
            type: 'category',
            data: arrDay
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '低消费物价',
            type: 'line',
            data: arrTypeOfConsumers[0],
            smooth: true,
            // areaStyle: {},
            // stack: '总量',
            markArea: {
                data: [
                    [{
                        name: '出事期间',
                        xAxis: intAreaBegin
                    }, {
                        xAxis: intAreaEnd
                    }]
                ]
            }
        }, {
            name: '中消费物价',
            type: 'line',
            data: arrTypeOfConsumers[1],
            smooth: true,
            // stack: '总量',
            // areaStyle: {}
        }, {
            name: '高消费物价',
            type: 'line',
            data: arrTypeOfConsumers[2],
            smooth: true,
            // areaStyle: {},
            // stack: '总量'
        }]
    };
    chartTypeOfConsumers.setOption(optTypeOfConsumers);


    // 绘制 不同消费种类物价 的曲线
    optNumberOfConsumers = {
        title: {
            text: '不同消费种类市民数'
        },
        xAxis: {
            type: 'category',
            data: arrDay
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '低消费人数',
            type: 'line',
            data: arrChartNumberOfConsumers[0],
            smooth: true,
            areaStyle: {},
            stack: '总量',
            markArea: {
                data: [
                    [{
                        name: '出事期间',
                        xAxis: intAreaBegin
                    }, {
                        xAxis: intAreaEnd
                    }]
                ]
            }
        }, {
            name: '中消费人数',
            type: 'line',
            data: arrChartNumberOfConsumers[1],
            smooth: true,
            stack: '总量',
            areaStyle: {}
        }, {
            name: '高消费人数',
            type: 'line',
            data: arrChartNumberOfConsumers[2],
            smooth: true,
            areaStyle: {},
            stack: '总量'
        }]
    };
    chartNumberOfConsumers.setOption(optNumberOfConsumers);
};

HTML

<!--
 * @Descripttion: 遗传算法展示页
 * @version: 0.1.0
 * @Author: BerryBC
 * @Date: 2020-05-09 10:09:50
 * @LastEditors: BerryBC
 * @LastEditTime: 2020-05-18 23:45:25
 -->
<!DOCTYPE html>

<html lang="zh-yue-Hans">

<head>
    <!-- Bootstrap Core CSS -->

    <link href="./static/css/animate.css" rel="stylesheet" type="text/css" />
    <link href="./static/css/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="./static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="./static/css/app-creative.min.css" rel="stylesheet" type="text/css" />
    <link href="./static/css/style.css" rel="stylesheet" type="text/css" />

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        消费水平变化
    </title>

</head>

<body>
    <div class="container">

        <section>
            <h2>世事无常</h2>
            <div class="col-md-12 mb-3">
                <button class="btn btn-primary btn-lg btn-block" id='btnGo'>正常的日子</button>
                <button class="btn btn-danger btn-lg btn-block" id='btnBegan'>发生了某些不好的事情！</button>
                <button class="btn btn-success btn-lg btn-block" id='btnBack'>日子又正常了</button>
            </div>
        </section>
        <section>
            <h2>图表</h2>
            <div class="row">
                <div id="divCanTotalSpend" style="width: 100%;height:300px;"></div>
            </div>

            <div class="row">
                <div id="divCanTypeOfConsumers" style="width: 50%;height:300px;"></div>
                <div id="divCanNumberOfConsumers" style="width: 50%;height:300px;"></div>
            </div>
        </section>
    </div>
</body>


<script src="./static/js/echarts.min.js"></script>
<script src="./static/js/jquery.min.js" type="text/javascript"></script>
<script src="./static/js/jquery-ui.min.js" type="text/javascript"></script>
<script src="./static/js/bootstrap.min.js" type="text/javascript"></script>

<script src="./static/js/Consumption.js?v=20200518" type="text/javascript"></script>

</html>