python request 转json的时候true变成true_python+django+echarts+mysql分析基金涨幅

最新推荐文章于 2022-05-07 22:37:30 发布

嘿嘿超

最新推荐文章于 2022-05-07 22:37:30 发布

阅读量205

点赞数

文章标签： python request 转json的时候true变成true

本文链接：https://blog.csdn.net/weixin_42100129/article/details/113669119

版权

因为前几天用python爬取了1000天混合型基金的数据

就想着，反正也没事干

要不用python的django做个网页显示？

说干就干，想法就是django从数据库中取到数据

返回json，前端的echarts解析

并且生成可视化界面

1.启动django

写views文件

import json
from django.http import HttpResponse
from django.shortcuts import render
import pymysql


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")


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

这里说一下 testDB是链接数据库，并且返回json数据

那么display这个视图呢就是单纯的显示，

然后我们去配置一下我们的路由

from django.urls import path
from .views import index,testDB,displayJson
app_name="article"
urlpatterns = [
    path('DB/',testDB),
    path('json/',displayJson)
]

然后我们启动django

输入我们的路由，测试一下，是否可以返回json数据

成功返回 json数据

那么我们接下来

去写前端的页面

2.首先先搭建一个echarts的框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/js/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>

接下来就去写我们的script

<script>

    function keepTwoDecimal(num) {
               var result = parseFloat(num);
               if (isNaN(result)) {
                   alert('传递参数错误，请检查！');
                  return false;
              }
               result = Math.round(num * 100) / 100;
               return result;
         };
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;
    }
    //console.log(names)

    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>

写完之后，我们去浏览器测试一下

成功显示，本次coding到此结束，有问题欢迎大家留言

嘿嘿超

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
python request 转json的时候true变成true_python+django+echarts+mysql分析基金涨幅

因为前几天用python爬取了1000天混合型基金的数据就想着，反正也没事干要不用python的django做个网页显示？说干就干，想法就是django从数据库中取到数据返回json，前端的echarts解析并且生成可视化界面1.启动django写views文件import jsonfrom django.http import HttpResponsefrom django.shortcut...
复制链接

扫一扫