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

 更新时间:2022年08月07日 09:35:53   作者:朝阳星河  
本文主要介绍了echarts动态获取Django数据的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

一、后端

1. models模块

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

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

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

    // 倒包,这是直接调用网上的包,不需要额外在静态文件中下载
    <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

<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,结合实际情况酌情使用饼状图、柱状体、折线图及其他,在使用的过程中注意官网中data的格式。

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

相关文章

  • 如何理解Python中包的引入

    如何理解Python中包的引入

    在本篇文章里小编给各位分享的是一篇关于Python中包的引入详解内容,需要的朋友们可以参考学习下。
    2020-05-05
  • pycharm第三方库安装失败的问题及解决经验分享

    pycharm第三方库安装失败的问题及解决经验分享

    这篇文章主要介绍了pycharm第三方库安装失败的解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • python 图片验证码代码

    python 图片验证码代码

    在网络应用中,验证码常常作为一个必备的手段,用来避免机器人恶意注册,保证坐在浏览器前的是一个人。
    2008-12-12
  • Python文字截图识别OCR工具实例解析

    Python文字截图识别OCR工具实例解析

    这篇文章主要介绍了Python文字截图识别OCR工具实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • python+selenium行为链登录12306(滑动验证码滑块)

    python+selenium行为链登录12306(滑动验证码滑块)

    这篇文章主要介绍了python+selenium行为链登录12306,使用python网络爬虫登录12306,下面小编为大家分享一段代码,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-02-02
  • numpy基础教程之np.linalg

    numpy基础教程之np.linalg

    这篇文章主要给大家介绍了关于numpy基础教程之np.linalg的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-02-02
  • django配置DJANGO_SETTINGS_MODULE的实现

    django配置DJANGO_SETTINGS_MODULE的实现

    本文主要介绍了django配置DJANGO_SETTINGS_MODULE,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 详解重置Django migration的常见方式

    详解重置Django migration的常见方式

    这篇文章主要介绍了详解重置Django migration的常见方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • Windows下多版本Python共享Poetry测试安装

    Windows下多版本Python共享Poetry测试安装

    这篇文章主要为大家介绍了Windows下多版本Python共享Poetry的测试安装配置,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • Python Pandas工具绘制数据图使用教程

    Python Pandas工具绘制数据图使用教程

    Pandas是基于NumPy 的一种工具,该工具是为解决数据分析任务而创建的。Pandas还可以绘制多重数据图表,本文将为大家介绍如何通过Pandas绘制图表,感兴趣的可以了解一下
    2021-12-12

最新评论