数据统计
图表
一般需要用到两种插件
- highchart：国外的
- echarts：国内的，百度开源的
修改myproject/app01/templates/layout.html
添加数据统计菜单
<li><a href="/chart/list/">数据统计</a></li>
新建myproject/app01/views/chart.py
修改myproject/myproject/urls.py
添加路由
#数据统计
path('chart/list/', chart.chart_list),
修改myproject/app01/views/chart.py
from django.shortcuts import render
def chart_list(request):
"""数据统计页面"""
return render(request, 'chart_list.html')
新建myproject/app01/templates/chart_list.html
获取echarts
获取方式: https://registry.npmjs.org/echarts/-/echarts-5.4.1.tgz
下载完成后
将此文件放到项目静态文件目录下
修改myproject/app01/templates/chart_list.html
引入Apache ECharts
{% extends 'layout.html' %}
{% load static %}
{% block content %}
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">折线图</div>
<div class="panel-body">
图图图
</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>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">饼图</div>
<div class="panel-body">
图图图
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script src="{% static 'js/echarts.js' %}"></script>
{% endblock %}
绘制一个简单的柱状图
1.在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。
2.然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图。
修改myproject/app01/templates/chart_list.html
{% extends 'layout.html' %}
{% load static %}
{% block content %}
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">折线图</div>
<div class="panel-body">
图图图
</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">
图图图
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script src="{% static 'js/echarts.js' %}"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('m2'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
{% endblock %}
稍微修改一下柱状图
修改myproject/app01/templates/chart_list.html
修改myproject/app01/templates/chart_list.html
将图例放在底部
legend: {
data: ['销量','业绩'],
bottom: 0
},
修改myproject/app01/templates/chart_list.html
将图的标题居中
title: {
text: 'ECharts 入门示例',
textAlign: 'auto',
left: 'center'
},
现在表是写定的，怎么通过Ajax从后台获取数据然后展示呢
修改myproject/app01/templates/chart_list.html
{% extends 'layout.html' %}
{% load static %}
{% block content %}
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">折线图</div>
<div class="panel-body">
图图图
</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.js' %}"></script>
<script type="text/javascript">
$(function () {
initBar();
})
/**
*初始化柱状图
*/
function initBar() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('m2'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例',
{#subtext: '小标题',#}
textAlign: 'auto',
left: 'center'
},
tooltip: {},
legend: {
data: [], //后台获取
bottom: 0
},
xAxis: {
data: [] //后台获取
},
yAxis: {},
series: [] //后台获取
};
$.ajax({
url: "/chart/bar/",
type: "get",
dataType: "JSON",
success: function (res) {
//将后台返回的数据，更新到option中
if (res.status) {
option.legend.data = res.data.legend;
option.xAxis.data = res.data.x_axis;
option.series = res.data.series_list;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
})
}
</script>
{% endblock %}
修改myproject/myproject/urls.py
添加路由
path('chart/bar/', chart.chart_bar),
修改myproject/app01/views/chart.py
from django.shortcuts import render
from django.http import JsonResponse
def chart_list(request):
"""数据统计页面"""
return render(request, 'chart_list.html')
def chart_bar(request):
"""构造柱状图的数据"""
#数据可以去数据库中获取
legend = ["11","77"]
series_list = [
{
"name": '11',
"type": 'bar',
"data": [5, 20, 36, 10, 10, 20]
},
{
"name": '77',
"type": 'bar',
"data": [53, 12, 13, 10, 20, 27]
}
]
x_axis = ['1月', '2月', '3月', '4月', '5月', '6月']
result = {
"status":True,
"data":{
'legend':legend,
'series_list': series_list,
'x_axis':x_axis
}
}
return JsonResponse(result)
饼状图
修改myproject/app01/templates/chart_list.html
{% extends 'layout.html' %}
{% load static %}
{% block content %}
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">折线图</div>
<div class="panel-body">
图图图
</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.js' %}"></script>
<script type="text/javascript">
$(function () {
initBar();
iniPie();
})
/**
*初始化柱状图
*/
function initBar() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('m2'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例',
{#subtext: '小标题',#}
textAlign: 'auto',
left: 'center'
},
tooltip: {},
legend: {
data: [], //后台获取
bottom: 0
},
xAxis: {
data: [] //后台获取
},
yAxis: {},
series: [] //后台获取
};
$.ajax({
url: "/chart/bar/",
type: "get",
dataType: "JSON",
success: function (res) {
//将后台返回的数据，更新到option中
if (res.status) {
option.legend.data = res.data.legend;
option.xAxis.data = res.data.x_axis;
option.series = res.data.series_list;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
})
}
/**
*初始化饼状图
*/
function iniPie() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('m3'));
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
bottom: 0
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{value: 1048, name: 'Search Engine'},
{value: 735, name: 'Direct'},
{value: 580, name: 'Email'},
{value: 484, name: 'Union Ads'},
{value: 300, name: 'Video Ads'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
</script>
{% endblock %}
同样通过Ajax从后台获取数据然后用饼图展示
修改myproject/app01/templates/chart_list.html
{% extends 'layout.html' %}
{% load static %}
{% block content %}
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">折线图</div>
<div class="panel-body">
图图图
</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.js' %}"></script>
<script type="text/javascript">
$(function () {
initBar();
iniPie();
})
/**
*初始化柱状图
*/
function initBar() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('m2'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例',
{#subtext: '小标题',#}
textAlign: 'auto',
left: 'center'
},
tooltip: {},
legend: {
data: [], //后台获取
bottom: 0
},
xAxis: {
data: [] //后台获取
},
yAxis: {},
series: [] //后台获取
};
$.ajax({
url: "/chart/bar/",
type: "get",
dataType: "JSON",
success: function (res) {
//将后台返回的数据，更新到option中
if (res.status) {
option.legend.data = res.data.legend;
option.xAxis.data = res.data.x_axis;
option.series = res.data.series_list;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
})
}
/**
*初始化饼状图
*/
function iniPie() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('m3'));
var option = {
title: {
text: '部门预算占比',
subtext: '分公司',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
bottom: 0
},
series: [
{
name: '预算',
type: 'pie',
radius: '50%',
data: [
{value: 1048, name: 'IT部门'},
{value: 735, name: '运营'},
{value: 580, name: '新媒体'},
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
$.ajax({
url: "/chart/pie/",
type: "get",
dataType: "JSON",
success: function (res) {
//将后台返回的数据，更新到option中
if (res.status) {
option.series[0].data = res.data;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
})
}
</script>
{% endblock %}
修改myproject/myproject/urls.py
添加路由
path('chart/pie/', chart.chart_pie),
修改myproject/app01/views/chart.py
from django.shortcuts import render
from django.http import JsonResponse
def chart_list(request):
"""数据统计页面"""
return render(request, 'chart_list.html')
def chart_bar(request):
"""构造柱状图的数据"""
#数据可以去数据库中获取
legend = ["11","77"]
series_list = [
{
"name": '11',
"type": 'bar',
"data": [5, 20, 36, 10, 10, 20]
},
{
"name": '77',
"type": 'bar',
"data": [53, 12, 13, 10, 20, 27]
}
]
x_axis = ['1月', '2月', '3月', '4月', '5月', '6月']
result = {
"status":True,
"data":{
'legend':legend,
'series_list': series_list,
'x_axis':x_axis
}
}
return JsonResponse(result)
def chart_pie(request):
"""构造饼图的数据"""
db_data_list = [
{"value": 2048, "name": 'IT部门'},
{"value": 735, "name": '运营'},
{"value": 580, "name": '新媒体'},
]
result = {
"status": True,
"data": db_data_list
}
return JsonResponse(result)
折线图
修改myproject/app01/templates/chart_list.html
{% extends 'layout.html' %}
{% load static %}
{% 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: 300px;"></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.js' %}"></script>
<script type="text/javascript">
$(function () {
initLine();
initBar();
initPie();
})
/**
*初始化折线图
*/
function initLine() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('m1'));
// 指定图表的配置项和数据
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
/**
*初始化柱状图
*/
function initBar() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('m2'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例',
{#subtext: '小标题',#}
textAlign: 'auto',
left: 'center'
},
tooltip: {},
legend: {
data: [], //后台获取
bottom: 0
},
xAxis: {
data: [] //后台获取
},
yAxis: {},
series: [] //后台获取
};
$.ajax({
url: "/chart/bar/",
type: "get",
dataType: "JSON",
success: function (res) {
//将后台返回的数据，更新到option中
if (res.status) {
option.legend.data = res.data.legend;
option.xAxis.data = res.data.x_axis;
option.series = res.data.series_list;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
})
}
/**
*初始化饼状图
*/
function initPie() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('m3'));
var option = {
title: {
text: '部门预算占比',
subtext: '分公司',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
bottom: 0
},
series: [
{
name: '预算',
type: 'pie',
radius: '50%',
data: [
{value: 1048, name: 'IT部门'},
{value: 735, name: '运营'},
{value: 580, name: '新媒体'},
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
$.ajax({
url: "/chart/pie/",
type: "get",
dataType: "JSON",
success: function (res) {
//将后台返回的数据，更新到option中
if (res.status) {
option.series[0].data = res.data;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
})
}
</script>
{% endblock %}
同样通过Ajax从后台获取数据然后用折线图展示
修改myproject/app01/templates/chart_list.html
{% extends 'layout.html' %}
{% load static %}
{% 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: 300px;"></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.js' %}"></script>
<script type="text/javascript">
$(function () {
initLine();
initBar();
initPie();
})
/**
*初始化折线图
*/
function initLine() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('m1'));
// 指定图表的配置项和数据
var option = {
title: {
text: '分公司业绩',
left: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: [],
bottom: 0
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
series: []
};
$.ajax({
url: "/chart/line/",
type: "get",
dataType: "JSON",
success: function (res) {
//将后台返回的数据，更新到option中
if (res.status) {
option.legend.data = res.data.legend;
option.xAxis.data = res.data.x_axis;
option.series = res.data.series_list;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
})
}
/**
*初始化柱状图
*/
function initBar() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('m2'));
// 指定图表的配置项和数据
var option = {
title: {
text: '总公司业绩',
{#subtext: '小标题',#}
textAlign: 'auto',
left: 'center'
},
tooltip: {},
legend: {
data: [], //后台获取
bottom: 0
},
xAxis: {
data: [] //后台获取
},
yAxis: {},
series: [] //后台获取
};
$.ajax({
url: "/chart/bar/",
type: "get",
dataType: "JSON",
success: function (res) {
//将后台返回的数据，更新到option中
if (res.status) {
option.legend.data = res.data.legend;
option.xAxis.data = res.data.x_axis;
option.series = res.data.series_list;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
})
}
/**
*初始化饼状图
*/
function initPie() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('m3'));
var option = {
title: {
text: '部门预算占比',
subtext: '分公司',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
bottom: 0
},
series: [
{
name: '预算',
type: 'pie',
radius: '50%',
data: [
{value: 1048, name: 'IT部门'},
{value: 735, name: '运营'},
{value: 580, name: '新媒体'},
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
$.ajax({
url: "/chart/pie/",
type: "get",
dataType: "JSON",
success: function (res) {
//将后台返回的数据，更新到option中
if (res.status) {
option.series[0].data = res.data;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
})
}
</script>
{% endblock %}
修改myproject/myproject/urls.py
添加路由
path('chart/line/', chart.chart_line),
修改myproject/app01/views/chart.py
from django.shortcuts import render
from django.http import JsonResponse
def chart_list(request):
"""数据统计页面"""
return render(request, 'chart_list.html')
def chart_bar(request):
"""构造柱状图的数据"""
# 数据可以去数据库中获取
legend = ["11", "77"]
series_list = [
{
"name": '11',
"type": 'bar',
"data": [5, 20, 36, 10, 10, 20]
},
{
"name": '77',
"type": 'bar',
"data": [53, 12, 13, 10, 20, 27]
}
]
x_axis = ['1月', '2月', '3月', '4月', '5月', '6月']
result = {
"status": True,
"data": {
'legend': legend,
'series_list': series_list,
'x_axis': x_axis
}
}
return JsonResponse(result)
def chart_pie(request):
"""构造饼图的数据"""
db_data_list = [
{"value": 2048, "name": 'IT部门'},
{"value": 735, "name": '运营'},
{"value": 580, "name": '新媒体'},
]
result = {
"status": True,
"data": db_data_list
}
return JsonResponse(result)
def chart_line(request):
"""构造折线图的数据"""
legend = ["上海", "浙江"]
series_list = [
{
"name": '上海',
"type": 'line',
"stack": 'Total',
"data": [5, 20, 36, 10, 10, 20]
},
{
"name": '浙江',
"type": 'line',
"stack": 'Total',
"data": [53, 12, 13, 10, 20, 27]
}
]
x_axis = ['1月', '2月', '3月', '4月', '5月', '6月']
result = {
"status": True,
"data": {
'legend': legend,
'series_list': series_list,
'x_axis': x_axis
}
}
return JsonResponse(result)
简单模拟highcharts的使用
path('chart/highcharts/', chart.highcharts),
def highcharts(request):
"""highcharts示例"""
return render(request, 'highcharts.html')
{% extends 'layout.html' %}
{% load static %}
{% block content %}
<div class="container">
<div id="m1" style="width: 100%;height:400px;"></div>
</div>
{% endblock %}
{% block js %}
<script src="https://code.hcharts.cn/highcharts.js"></script>
<script>
// 图表配置
var options = {
chart: {
type: 'column'
},
title: {
text: '月平均降雨量'
},
subtitle: {
text: '数据来源: WorldClimate.com'
},
xAxis: {
categories: [
'一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: '降雨量 (mm)'
}
},
tooltip: {
// head + 每个 point + footer 拼接成完整的 table
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
borderWidth: 0
}
},
series: [{
name: '东京',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: '纽约',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: '伦敦',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: '柏林',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
};
// 图表初始化函数
var chart = Highcharts.chart('m1', options);
</script>
{% endblock %}
如果要修改样式
替换即可
浙公网安备 33010602011771号