数据可视化之用django和echarts分析周涨幅top5的基金

2022-04-15 16:26:01 浏览数 (1)

Start

研究了一个天天基金网的基金爬虫

前一天晚上把爬虫挂在服务器上

爬取了8000多只基金中3712只混合基金中的1000只基金的数据

并存入到数据库

1000条数据，并且已经计算出来了一些指标，例如这个涨幅的月季比例

公式就是

月涨幅/季涨幅

还有就是月季对应情况，根据我们算出来的月季比进行判断

代码语言：javascript复制
    if i >= 0.8:
        w.append('急速上涨')
    elif 0.8 > i >= 0.5:
        w.append('上涨')
    elif 0.5 > i >= 0.2:
        w.append('持平')
    elif 0.2 > i >= 0:
        w.append('下滑')
    else:
        w.append('形势逆转')

这些数据倒是有了，然后我就想要不用django做个前端展示一下？

说干就干

01

开始准备

之前听说过echarts可以做可视化，但是从来没有用过，也没学过

昨天一时脑热，直接去官网看了一下demo和文档

感觉不难，直接复制js文件然后把demo复制过来

按照想要的进行修改

这是官网的demo

直接复制代码过来

然后读一下，大致的改一下

样式倒是不难改，最难的就是配色，官网的颜色还行，还是因为是top5

所以有五条数据

就需要五种配色

这真是难死我了-=-

改改样式，读读代码，这一部分的任务就算完成

02

后端准备

毫无疑问，咱们后端用django

但是因为需要echarts配合，所以我们选择后端查询数据库

然后返回json

这样前端加载的话也方便

这就用到了jquery

之前用过jquery，但还是要是自己写还是第一次

多方研究，最后决定用一个很简单的例子去写

代码语言：javascript复制
$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("demo_ajax_json.js",function(result){
            $.each(result, function(i, field){
                $("div").append(field   " ");
            });
        });
    });
});

这个是通过js文件去读取的

我们这里直接通过我们的ur去获取

所以，先启动我们的django，写一个简单的返回json的view

代码语言：javascript复制
def testDB(request):
    conn=pymysql.connect(host="127.0.0.1",user="root",password="密码",port=3306,database="fiance")
    cursor=conn.cursor()
    sql="""
        SELECT * from sheet1 order by 近1周 DESC LIMIT 5"""
    cursor.execute(sql)
    result=cursor.fetchall()
    return HttpResponse(json.dumps(result), content_type="application/json")

然后去配置我们的url

代码语言：javascript复制
from django.urls import path
from .views import index,testDB,displayJson
app_name="article"
urlpatterns = [
    ···
    path('DB/',testDB),
    ···
]

这时候我们启动django测试一下

是否可以返回

打开浏览器输入我们配置好的url

可以看到我们已经成功的返回了json数据

并且也是前五条数据

那么我们直接开干吧

就开始写前端页面

03

搞起来

先在views中简单写一个返回页面的

代码语言：javascript复制

def displayJson(request):
    return render(request,"display.html")

然后去配置url

代码语言：javascript复制
from django.urls import path
from .views import index,testDB,displayJson

app_name="article"
urlpatterns = [
    ···
    ···
    path('json/',displayJson)
]

接下来就是配置我们的前端页面了

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="//www.jb51.net/jslib/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
</head>
<body>
<h3 style="text-align: center">周涨幅top5 混合型基金</h3>
 <div id="main" style="width:1300px;height:900px;margin: 0 auto;"></div>

</body>
</html>

这是骨架，先搭建出来

这其中有一个小问题就是，我们的月季比例计算出来的是一个很长的float

就是说有很多的小数

这样在显示的时候

就很长，影像视觉体验

所以我们写一个取证函数

然后返回一个两位小数就行

代码语言：javascript复制
function keepTwoDecimal(num) {
               var result = parseFloat(num);
               if (isNaN(result)) {
                   alert('传递参数错误，请检查！');
                  return false;
              }
               result = Math.round(num * 100) / 100;
               return result;
};

然后去写script

代码语言：javascript复制
<script>

   
var app = {};

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

var posList = [
    'left', 'right', 'top', 'bottom',
    'inside',
    'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
    'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
];

app.configParameters = {
    rotate: {
        min: -90,
        max: 90
    },
    align: {
        options: {
            left: 'left',
            center: 'center',
            right: 'right'
        }
    },
    verticalAlign: {
        options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
        }
    },
    position: {
        options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
        }, {})
    },
    distance: {
        min: 0,
        max: 100
    }
};

app.config = {
    rotate: 90,
    align: 'center',
    verticalAlign: 'middle',
    position: 'insideBottom',
    distance: 15,
    onChange: function () {
        var labelOption = {
            normal: {
                rotate: app.config.rotate,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                position: app.config.position,
                distance: app.config.distance
            }
        };
        myChart.setOption({
            series: [{
                label: labelOption
            }, {
                label: labelOption
            }, {
                label: labelOption
            }, {
                label: labelOption
            },{
                label: labelOption
            },
            ]
        });
    }
};

var labelOption = {
    show: true,
    position: app.config.position,
    distance: app.config.distance,
    align: app.config.align,
    verticalAlign: app.config.verticalAlign,
    rotate: app.config.rotate,
    formatter: '',
    fontSize: 18,
    rich: {
        name: {
        }
    }
};

$.getJSON('/blog/DB',function (datas) {
    var names=new Array();
    var as=new Array();
    var a=null;
    var colors=['#F2385A','#F5A503','#E9F1DF','#4AD9D9','#36B1BF']
    for(let u=0;u<datas.length;u  ){
        var stra=datas[u][1] "~" datas[u][2];
        names[u]=stra;
        a={
                name: names[u],
                itemStyle:{
                    normal:{
                        label:{
                            show:true,
                            posList:"top",
                        },
                        color:colors[u],
                    }
                },
                type: 'bar',
                barWidth:30,
                barGap: 0,
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: [datas[u][4], datas[u][5], keepTwoDecimal(datas[u][7]), datas[u][10], datas[u][11]]
            };
        as[u]=a;
    }

    option = {
        color:['#15F995','#D9E39D','#7C80FE','#FFFF28','#830E45'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: names
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: ['近一周涨幅%', '近一月涨幅%', '月季比例', '近一季度涨幅%', '近两季度涨幅%']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series:as,
    };
    option && myChart.setOption(option);
})
</script>

成功运行

04

Ending

这次碰到几个壁：

  1. 每个柱状图的颜色搭配，包括去设置每一个的颜色。

2.如何从数据库取出top5，解决办法就是先排序然后用limit

3.其余的就是echarts中一些配置的坑，从百度就能解决

In summary,菜鸟不放弃，早晚成大佬

django php json jquery 爬虫

0 人点赞