数据统计
echarts 国内
获取方式: https://registry.npmjs.org/echarts/-/echarts-5.4.1.tgz 下载完成后 将此文件放到项目静态文件目录下 接下来,上手做
柱状图
编辑myproject/employee_management/templates/layout.html
编辑myproject/myproject/urls.py
from employee_management.views import depart,user,pretty,admin, account, task, order, chart
# 数据统计
path('chart/list/', chart.chart_list),
新建myproject/employee_management/views/chart.py
from django.shortcuts import render, HttpResponse
def chart_list(request):
""" 数据统计 """
return render(request, 'chart_list.html')
新建myproject/employee_management/templates/chart_list.html
{% extends 'layout.html'%}
{% block css %}
{% endblock %}
{% block content %}
数据统计
折线图
柱状图
饼图
Panel content
{% endblock %}
{% block script %}
{% endblock %}
浏览器访问
调整一下文字和标题的位置
编辑myproject/employee_management/templates/chart_list.html
textAlign: "auto",
left: "center",
legend: {
data: ['销量', '价格'],
bottom: 0,
},
模拟从后台获取数据
编辑myproject/myproject/urls.py
path('chart/bar/', chart.chart_bar),
编辑myproject/employee_management/views/chart.py,新增chart_bar函数
import json
from django.shortcuts import render, HttpResponse
from django.http import JsonResponse
def chart_list(request):
""" 数据统计 """
return render(request, 'chart_list.html')
def chart_bar(request):
""" 构造柱状图的数据 """
# 数据可以去数据库中获取
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)
编辑myproject/employee_management/templates/chart_list.html
饼图
经过上面柱状图的测试,饼图就非常简单了
打开网址: https://echarts.apache.org/examples/zh/index.html#chart-type-pie 编辑myproject/employee_management/templates/chart_list.html,在复制代码的基础上进行修改
浏览器测试
接下来实现模拟获取后台数据,依然是上面的套路
编辑myproject/myproject/urls.py
path('chart/pie/', chart.chart_pie),
编辑myproject/employee_management/views/chart.py
def chart_pie(request):
""" 构造饼图的数据 """
data_list = [
{ "value": 1048, "name": '销售部' },
{ "value": 735, "name": '运营部' },
{ "value": 580, "name": '财务部' },
]
result = {
"status": True,
"data_list": data_list,
}
return JsonResponse(result)
编辑myproject/employee_management/templates/chart_list.html
function iniPie() {
var chartDom = document.getElementById('m3');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '部门预算占比',
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);
}
}
})
}
特别说明:
老版本的 echart 不会对 option 变量在局部声明,而是直接声明为全局变量,我是用的 echart 版本为5.4,已经提前帮我声明好了(不加 var 表示全局变量)
浏览器测试
折线图
编辑myproject/employee_management/templates/chart_list.html
增加initLine函数
$(function () {
initBar();
iniPie();
initLine();
})
function initLine() {
var chartDom = document.getElementById('m1');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '分公司业绩图',
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: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
},
yAxis: {
type: 'value'
},
series: [
{
name: '天津分公司',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '北京分公司',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
]
};
option && myChart.setOption(option);
}
浏览器访问
实现获取后台数据
编辑myproject/employee_management/templates/chart_list.html
function initLine() {
var chartDom = document.getElementById('m1');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '分公司业绩图',
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);
}
}
})
}
编辑myproject/myproject/urls.py
path('chart/line/', chart.chart_line),
编辑myproject/employee_management/views/chart.py
def chart_line(request):
""" 构造折线图的数据 """
legend_list = ['天津分公司', '北京分公司']
xAxis_list = ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
series_list = [
{
"name": '天津分公司',
"type": 'line',
"stack": 'Total',
"data": [120, 132, 101, 134, 90, 230, 210]
},
{
"name": '北京分公司',
"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)
浏览器测试
好文链接
您阅读本篇文章共花了：
发表评论