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數據內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Django使用echarts進行可視化展示的實踐
- Django與圖表的數據交互的實現
- JavaScript之ECharts用法講解
- 基於vue+echarts數據可視化大屏展示的實現
- vue2 利用echarts 單獨繪制省份的步驟