echarts動態(tài)獲取Django數(shù)據(jù)的實現(xiàn)示例

更新時間：2022年08月07日 09:35:53 作者：朝陽星河

本文主要介紹了echarts動態(tài)獲取Django數(shù)據(jù)的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

在開發(fā)過程中我們需要將我們的數(shù)據(jù)通過圖標的形式展現(xiàn)出來，接下來我為大家介紹一個有趣的框架：Echarts。這是一個使用JavaScript實現(xiàn)的開源可視化庫，提供了常規(guī)的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統(tǒng)計的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關系數(shù)據(jù)可視化的關系圖、treemap、旭日圖，多維數(shù)據(jù)可視化的平行坐標，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭（官網照抄，有興趣的小伙伴可以去官網發(fā)現(xiàn)更多echarts的運用）。下面直接上代碼：

一、后端

1. models模塊

from django.db import models
# 一個簡單的統(tǒng)計地區(qū)
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), # 展示數(shù)據(jù)
    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') # 數(shù)據(jù)展示

def test(request):
    info = EventInfo.objects.values_list('event_location').annotate(Count('id'))
    # 這里使用了Model.object.values_list().annotate()的方法,計數(shù)'event_location'，生成id_count，以list的形式展示出來,大家可以去網上研究一下annotate函數(shù)
    # >>> 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
    # 將數(shù)據(jù)轉換成json格式，方便ajax調用
    return JsonResponse(test_dic, safe=False)

二、前端

1. HTML

    // 倒包，這是直接調用網上的包，不需要額外在靜態(tài)文件中下載
    <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>
    // 創(chuàng)建一個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>: {c}(wppm3vysvbp%)'
        },
        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的方式動態(tài)獲取后端代碼
        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>