脚本之家，脚本语言编程技术及教程分享平台！
分类导航

Python|VBS|Ruby|Lua|perl|VBA|Golang|PowerShell|Erlang|autoit|Dos|bat|

服务器之家 - 脚本之家 - Python - echarts动态获取Django数据的实现示例

echarts动态获取Django数据的实现示例

2022-08-07 14:58朝阳星河 Python

本文主要介绍了echarts动态获取Django数据的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

在开发过程中我们需要将我们的数据通过图标的形式展现出来，接下来我为大家介绍一个有趣的框架：Echarts。这是一个使用JavaScript实现的开源可视化库，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭（官网照抄，有兴趣的小伙伴可以去官网发现更多echarts的运用）。下面直接上代码：

一、后端

1. models模块

?
1
2
3
4
5
6
7
from django.db import models
# 一个简单的统计地区
class EventInfo(models.Model):
    event_location = models.CharField(max_length=30)
 
    class Meta:
        db_table = 'app_event_info'

2. urls

?
1
2
3
4
5
6
7
8
from django.conf.urls import url
 
from app1 import views
 
urlpatterns = [
    url(r'^home/', views.home), # 展示数据
    url(r'^test/', views.test), # api，提供json
]

3. views

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import json
 
from django.db.models import Count
from django.http import JsonResponse
from django.shortcuts import render
from app1.models import EventInfo
 
def home(request):
    return render(request, 'echarts_pie.html') # 数据展示
 
def test(request):
    info = EventInfo.objects.values_list('event_location').annotate(Count('id'))
    # 这里使用了Model.object.values_list().annotate()的方法,计数'event_location'，生成id_count，以list的形式展示出来,大家可以去网上研究一下annotate函数
    # >>> print info
    # [('上海', 6), ('北京', 5), ('天津', 4), ('太原', 4), ('南京', 3), ('苏州', 4)]
    jsondata = {
        "name": [i[0] for i in info],
        "count": [i[1] for i in info]
    }
    cities = []
    for n, c in zip(jsondata['name'], jsondata['count']):
        b = {}
        b['name'] = n
        b['count'] = c
        cities.append(b)
    test_dic = {}
    test_dic['data'] = cities
    # 将数据转换成json格式，方便ajax调用
    return JsonResponse(test_dic, safe=False)

二、前端

1. HTML

?
1
2
3
4
5
    // 倒包，这是直接调用网上的包，不需要额外在静态文件中下载
    <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    // 创建一个div，id为main，方便JavaScript使用
<div style="border:2px solid #a6e1ec;width:49%;height:450px;float:left" id="main"></div>

2. JavaScript

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<script type="text/javascript">
    // echartss的标准格式，属性可以去官网查看
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
        //color: [ '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463'], // 自定义echarts的颜色
        title: { // 标题
            text: 'cityinfo',
            subtext: 'just-test',
            x: 'center'
        },
        tooltip: { // 提示框组件
            trigger: 'item',
            formatter: '{a}</br>{b}: {c}({d}%)'
        },
        legend: {  // 图例组件
            orient: 'vertical',
            x: 'left',
            data: []
        },
        toolbox: {  // 工具栏
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'center',
                            max: 1548
                        }
                    }
                },
                restore: {show: true},
                saveAsImage: {show: true}
            },
        },
        calculable: true,
        series: [{ // 设置图形种类，常用的有pie(饼状图),bar(柱状体)，line(折线图)
            name: 'city',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            itemStyle: {
                normal: {
                    label: {show: true},
                    labelLine: {
                        show: true
                    },
                    color: function (value) { // 随机生成颜色(官网的默认颜色比较low，生成的也不怎么样)
                        return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
                    }
                },
                emphasis: {
                    label: {
                        show: true,
                        position: 'center',
                        textStyle: {
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    }
                }
            },
            data: []
        }]
    });
    myChart.showLoading();
    var names = [];
    var brower = [];
    $.ajax({ // ajax的方式动态获取后端代码
        type: 'get',
        url: 'http://127.0.0.1:8000/test/test/',
        dataType: 'json',
        success: function (result) {
            $.each(result.data, function (index, item) {
                names.push(item.name);
                brower.push({
                    value: item.count,
                    name: item.name
                });
            });
            myChart.hideLoading();
            myChart.setOption({
                legend: {
                    data: names
                },
                series: [{
                    data: brower
                }]
            });
        },
        error: function (errormsg) {
            alert('errormsg');
            myChart.hideLoading();
        }
    });
 
</script>

三、页面效果

echarts动态获取Django数据的实现示例

四、总结

大家在开发过程中如果需要将数据展示出来可以尝试着使用echarts，结合实际情况酌情使用饼状图、柱状体、折线图及其他，在使用的过程中注意官网中data的格式。

到此这篇关于echarts动态获取Django数据的实现示例的文章就介绍到这了,更多相关echarts动态获取Django数据内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！

原文链接：https://blog.csdn.net/weixin_45508740/article/details/102483068

  • django
  • 数据
  • echarts

    • 延伸 · 阅读

    精彩推荐
    • PythonPython 机器学习第一章环境配置图解流程

      Python 机器学习第一章环境配置图解流程

      机器学习是一类算法的总称，这些算法企图从大量历史数据中挖掘出其中隐含的规律，并用于预测或者分类，更具体的说，机器学习可以看作是寻找一个函...

      剑客阿良_ALiang8582022-02-23
    • Pythondjango模板结构优化的方法

      django模板结构优化的方法

      这篇文章主要介绍了django模板结构优化的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...

      小短腿电工5772021-06-03
    • Python对pyqt5中QTabWidget的相关操作详解

      对pyqt5中QTabWidget的相关操作详解

      今天小编就为大家分享一篇对pyqt5中QTabWidget的相关操作详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...

      coding上下求索11402021-07-17
    • Pythonpython实现隐马尔科夫模型HMM

      python实现隐马尔科夫模型HMM

      这篇文章主要为大家详细介绍了python实现隐马尔科夫模型HMM，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      adzhua14042021-01-24
    • PythonPyQt5每天必学之组合框

      PyQt5每天必学之组合框

      这篇文章主要为大家详细介绍了PyQt5每天必学之组合框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      我的世界你曾经来过5862021-02-02
    • Python浅谈pytorch卷积核大小的设置对全连接神经元的影响

      浅谈pytorch卷积核大小的设置对全连接神经元的影响

      今天小编就为大家分享一篇浅谈pytorch卷积核大小的设置对全连接神经元的影响，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧 ...

      tequilaro4272020-04-28
    • Pythonpython pycurl验证basic和digest认证的方法

      python pycurl验证basic和digest认证的方法

      这篇文章主要介绍了python pycurl验证basic和digest认证的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...

      lilongsy10152021-02-08
    • PythonPython 通过xpath属性爬取豆瓣热映的电影信息

      Python 通过xpath属性爬取豆瓣热映的电影信息

      我喜欢看电影，可以说大部分热门电影我都看过。处理爱好的目的，我看了看豆瓣热映的电影列表。于是我写了这个爬虫把豆瓣热映的电影都爬了下来。对...

      剑客阿良_ALiang6172022-02-28
    最近更新
    编辑推荐
    阅读排行
    热门标签
    2048 　 6006 　 contextlib 　 SLOTS 　 MELIAE 　 FEEDPARSER 　 暂存 　 持久性管理 　 pickle模块 　 THREADING 　 reduce 　 nignx 　 装饰器 　 函数式编程 　 兔子毒药 　 监控文件 　 流量监控 　 Web框架 　 draw.io 　 PIL库 　 高斯模糊 　 wxPython 　 import 　 自定义模块 　 Python开发 　 元类 　 metaclass 　 魔术方法 　 DNSPod 　 动态解析域名 　
    © 2019-2022 脚本之家 | 服务器之家(www.tuohang.net)旗下站点 版权所有关于我们联系我们版权申明网站地图