目錄

?一、echarts

1、下載

2、配置

?二、實(shí)現(xiàn)統(tǒng)計分析頁面--架構(gòu)和柱圖

1、url

2、chart.py

3、chart_list.html

4、修改url

5、新增chart_bar方法

6、修改chart_list.html

四、餅圖

1、url

?2、視圖chart.py新增

3、修改chart_list.html

?五、折線圖

1、url

2、chart.py新增

3、chart_list.html

---

接上一篇《django項(xiàng)目實(shí)戰(zhàn)九（django+bootstrap實(shí)現(xiàn)增刪改查）進(jìn)階ajax實(shí)現(xiàn)》

知識點(diǎn)：

?1、餅圖、柱圖、折線圖

?一、echarts

1、下載

鏈接：https://pan.baidu.com/s/1CDHwRrofeH5rKfzgCLR0qg?
提取碼：關(guān)注聯(lián)系博主

2、配置

?

?二、實(shí)現(xiàn)統(tǒng)計分析頁面--架構(gòu)和柱圖

1、url

2、chart.py

from django.shortcuts import renderdef chart_list(request):"""統(tǒng)計分析"""return render(request, 'chart_list.html')

3、chart_list.html

這里以柱圖為例子，定義一個div 、 （設(shè)置高度、寬度，ID重要【下面js要使用】）

<div id="m2" style="width: 600px;height: 400px;"></div>

?這個是導(dǎo)入js和柱圖（官方網(wǎng)站復(fù)制）

{% extends 'layout.html' %}
{% load static %}
{% block title %}<title>統(tǒng)計分析</title>
{% endblock %}
{% block content %}<div class="container"><div class="panel panel-default"><div class="panel-heading">折線圖</div><div class="panel-body">zhe</div></div><div class="row"><div class="col-sm-8"><div class="panel panel-default"><div class="panel-heading">柱狀圖</div><div class="panel-body"><div id="m2" style="width: 600px;height: 400px;"></div></div></div></div><div class="col-sm-4"><div class="panel panel-default"><div class="panel-heading">餅圖</div><div class="panel-body">Panel content</div></div></div></div></div>{% endblock %}{% block js %}<script src="{% static 'js/echarts.min.js' %}"></script><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('m2'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data: ['銷量', '價格']},xAxis: {data: ['1月', '2月', '3月', '4月', '5月', '6月']},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]},{name: '價格',type: 'bar',data: [25, 40, 80, 65, 70, 50]}]};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);</script>
{% endblock %}

4、修改url

5、新增chart_bar方法

from django.shortcuts import render
from django.http import JsonResponsedef chart_list(request):"""統(tǒng)計分析 頁面"""return render(request, 'chart_list.html')def chart_bar(request):""" 構(gòu)造柱狀圖的數(shù)據(jù) """# 數(shù)據(jù)可以去數(shù)據(jù)庫中獲取legend = ['銷量', '價格']xAxis = ['1月', '2月', '3月', '4月', '5月', '6月']series_list = [{"name": '銷量',"type": 'bar',"data": [5, 20, 36, 10, 10, 20]},{"name": '價格',"type": 'bar',"data": [25, 40, 80, 65, 70, 50]}]result = {"status": True,"data": {"legend": legend,"xAxis": xAxis,"series_list": series_list,}}return JsonResponse(result)

6、修改chart_list.html

{% extends 'layout.html' %}
{% load static %}
{% block title %}<title>統(tǒng)計分析</title>
{% endblock %}
{% block content %}<div class="container"><div class="panel panel-default"><div class="panel-heading">折線圖</div><div class="panel-body">zhe</div></div><div class="row"><div class="col-sm-8"><div class="panel panel-default"><div class="panel-heading">柱狀圖</div><div class="panel-body"><div id="m2" style="width: 100%;height: 400px;"></div></div></div></div><div class="col-sm-4"><div class="panel panel-default"><div class="panel-heading">餅圖</div><div class="panel-body">Panel content</div></div></div></div></div>{% endblock %}{% block js %}<script src="{% static 'js/echarts.min.js' %}"></script>
<script type="text/javascript">$(function () {initBar();})function initBar() {// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('m2'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {title: {text: '任務(wù)',//    subtext: "xxx公司", //副標(biāo)題textAlign: "auto",left: "center",},tooltip: {},legend: {data: [],   // 后臺獲取bottom: 0,},xAxis: {data: []    // 后臺獲取},yAxis: {},series: []      // 后臺獲取};$.ajax({url: "/chart/bar/",type: "get",dataType: "JSON",success: function(res){if(res.status){// 將獲取到的數(shù)據(jù)更新到 option 中option.legend.data = res.data.legend;option.xAxis.data = res.data.xAxis;option.series = res.data.series_list;// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);}}})}
</script>{% endblock %}

四、餅圖

1、url

?2、視圖chart.py新增

from django.shortcuts import render
from django.http import JsonResponsedef chart_list(request):"""統(tǒng)計分析 頁面"""return render(request, 'chart_list.html')def chart_bar(request):""" 構(gòu)造柱狀圖的數(shù)據(jù) """# 數(shù)據(jù)可以去數(shù)據(jù)庫中獲取legend = ['銷量', '價格']xAxis = ['1月', '2月', '3月', '4月', '5月', '6月']series_list = [{"name": '銷量',"type": 'bar',"data": [5, 20, 36, 10, 10, 20]},{"name": '價格',"type": 'bar',"data": [25, 40, 80, 65, 70, 50]}]result = {"status": True,"data": {"legend": legend,"xAxis": xAxis,"series_list": series_list,}}return JsonResponse(result)def chart_pie(request):""" 構(gòu)造餅圖的數(shù)據(jù) """data_list = [{"value": 248, "name": 'P0'},{"value": 735, "name": 'P1'},{"value": 580, "name": 'P2'},{"value": 180, "name": 'P3'},]result = {"status": True,"data_list": data_list,}return JsonResponse(result)

3、修改chart_list.html

{% extends 'layout.html' %}
{% load static %}
{% block title %}<title>統(tǒng)計分析</title>
{% endblock %}
{% block content %}<div class="container"><div class="panel panel-default"><div class="panel-heading">折線圖</div><div class="panel-body">zhe</div></div><div class="row"><div class="col-sm-8"><div class="panel panel-default"><div class="panel-heading">柱狀圖</div><div class="panel-body"><div id="m2" style="width: 100%;height: 400px;"></div></div></div></div><div class="col-sm-4"><div class="panel panel-default"><div class="panel-heading">餅圖</div><div class="panel-body"><div id="m3" style="width: 100%;height: 400px;"></div></div></div></div></div></div>{% endblock %}{% block js %}<script src="{% static 'js/echarts.min.js' %}"></script>
<script type="text/javascript">$(function () {initBar();iniPie();})function initBar() {// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('m2'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {title: {text: '任務(wù)',//    subtext: "xxx公司", //副標(biāo)題textAlign: "auto",left: "center",},tooltip: {},legend: {data: [],   // 后臺獲取bottom: 0,},xAxis: {data: []    // 后臺獲取},yAxis: {},series: []      // 后臺獲取};$.ajax({url: "/chart/bar/",type: "get",dataType: "JSON",success: function(res){if(res.status){// 將獲取到的數(shù)據(jù)更新到 option 中option.legend.data = res.data.legend;option.xAxis.data = res.data.xAxis;option.series = res.data.series_list;// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);}}})}// 餅圖function iniPie() {var chartDom = document.getElementById('m3');var myChart = echarts.init(chartDom);var option;option = {title: {text: '用例優(yōu)先級',subtext: 'xxx公司',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',bottom: 0,},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};$.ajax({url: "/chart/pie/",type: "get",dataType: "JSON",success: function(res) {if(res.status){option.series[0].data = res.data_list;option && myChart.setOption(option);}}})
}</script>{% endblock %}

?五、折線圖

1、url

?

2、chart.py新增

def chart_line(request):""" 構(gòu)造折線圖的數(shù)據(jù) """legend_list = ['2021', '2022']xAxis_list = ['1月', '2月', '3月', '4月', '5月', '6月', '7月']series_list = [{"name": '2021',"type": 'line',"stack": 'Total',"data": [120, 132, 101, 134, 90, 230, 210]},{"name": '2022',"type": 'line',"stack": 'Total',"data": [220, 182, 191, 234, 290, 330, 310]},]result = {"status": True,"data": {"legend_list": legend_list,"xAxis_list": xAxis_list,"series_list": series_list,}}return JsonResponse(result)

3、chart_list.html

{% extends 'layout.html' %}
{% load static %}
{% block title %}<title>統(tǒng)計分析</title>
{% endblock %}
{% block content %}<div class="container"><div class="panel panel-default"><div class="panel-heading">折線圖</div><div class="panel-body"><div id="m1" style="width: 100%;height: 250px;"></div></div></div><div class="row"><div class="col-sm-8"><div class="panel panel-default"><div class="panel-heading">柱狀圖</div><div class="panel-body"><div id="m2" style="width: 100%;height: 400px;"></div></div></div></div><div class="col-sm-4"><div class="panel panel-default"><div class="panel-heading">餅圖</div><div class="panel-body"><div id="m3" style="width: 100%;height: 400px;"></div></div></div></div></div></div>{% endblock %}{% block js %}<script src="{% static 'js/echarts.min.js' %}"></script>
<script type="text/javascript">$(function () {initBar();iniPie();initLine();})function initBar() {// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('m2'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {title: {text: '任務(wù)',//    subtext: "xxx公司", //副標(biāo)題textAlign: "auto",left: "center",},tooltip: {},legend: {data: [],   // 后臺獲取bottom: 0,},xAxis: {data: []    // 后臺獲取},yAxis: {},series: []      // 后臺獲取};$.ajax({url: "/chart/bar/",type: "get",dataType: "JSON",success: function(res){if(res.status){// 將獲取到的數(shù)據(jù)更新到 option 中option.legend.data = res.data.legend;option.xAxis.data = res.data.xAxis;option.series = res.data.series_list;// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);}}})}// 餅圖function iniPie() {var chartDom = document.getElementById('m3');var myChart = echarts.init(chartDom);var option;option = {title: {text: '用例優(yōu)先級',subtext: 'xxx公司',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',bottom: 0,},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};$.ajax({url: "/chart/pie/",type: "get",dataType: "JSON",success: function(res) {if(res.status){option.series[0].data = res.data_list;option && myChart.setOption(option);}}})
}// 折線圖function initLine() {var chartDom = document.getElementById('m1');var myChart = echarts.init(chartDom);var option;option = {title: {text: '分公司業(yè)績圖',left: "center",},tooltip: {trigger: 'axis'},legend: {data: [],bottom: 0,},grid: {left: '3%',right: '4%',bottom: '12%',containLabel: true},toolbox: {feature: {// saveAsImage: {}saveAsImage: false,}},xAxis: {type: 'category',boundaryGap: false,data: []},yAxis: {type: 'value'},series: []};$.ajax({url: "/chart/line/",type: "get",dataType: "JSON",success: function(res) {if(res.status){option.legend.data = res.data.legend_list;option.xAxis.data = res.data.xAxis_list;option.series = res.data.series_list;option && myChart.setOption(option);}}})
}</script>{% endblock %}