参考https://blog.csdn.net/BobYuan888/article/details/80428417
后端传输数据:json.dumps(value11A)
views.py
def dashboard(request):
'''dashboard'''
# main11参数提取
list_of_suggestion_dept_count = []
dict_of_sum_suggestion_dept_count = {}
for su in suggestion.objects.all():
list_of_suggestion_dept_count.append(su.suggestion_employee_dept)
for suggestion_employee_dept in list_of_suggestion_dept_count:
dept_sum = suggestion.objects.filter(suggestion_employee_dept=suggestion_employee_dept).aggregate(suggestion_employee_dept=Count('suggestion_employee_id'))
process_dict = {suggestion_employee_dept : dept_sum['suggestion_employee_dept']}
dict_of_sum_suggestion_dept_count.update(process_dict)
#print('dict_of_sum_suggestion_dept_count',dict_of_sum_suggestion_dept_count)
value11A = []
value11B = []
for key,value in dict_of_sum_suggestion_dept_count.items():
value11A.append(key)
value11B.append(value)
# main12参数提取
list_of_dept_review_count = []
dict_of_sum_dept_review_count = {}
for de in dept_review.objects.all():
list_of_dept_review_count.append(de.dept_review_suggestion_dept_reviewer)
for each_dept in list_of_dept_review_count:
dept_sum = dept_review.objects.filter(Q(dept_review_suggestion_dept_reviewer=each_dept) & Q(dept_review_suggestion_finished_review='已核准')).aggregate(each_dept=Count('dept_review_suggestion_employee_id'))
process_dict = {each_dept : dept_sum['each_dept']}
dict_of_sum_dept_review_count.update(process_dict)
print('dict_of_sum_dept_review_count',dict_of_sum_dept_review_count) #{'工艺质量部': 5, '总经办运营部': 1}
value12A = []
for key,value in dict_of_sum_suggestion_dept_count.items():
listA = []
listA.append(key)
listA.append(value)
value12A.append(listA)
print('json.dumps(value12A)',json.dumps(value12A))
print('json.dumps(value12A)',json.loads(json.dumps(value12A)))
###### 上下文内容字典
context = {
'value11A':json.dumps(value11A),
'value11B':json.dumps(value11B),
'value12A':json.dumps(value12A),
# 'value22':value22,
# 'value11':value11,
}
return render(request, 'dashboard.html',context=context)
前端处理数据JSON.parse(‘{{ value12A|safe }}’)
template
<div class="container-fluid ">
<!--培训需求看板-->
<div class="row">
<!--左边-->
<div class="col-lg-3 col-md py-1 align-items-center">
<!--收集情况-->
<div class="row p-2 pt-3 m-2 border" style="width: 300px;height:300px;">
<div id="main11" style="width: 90%;height:90%;"></div>
</div>
<script type="text/javascript">
//获取变量值
var value11A_js = JSON.parse('{{ value11A|safe }}');
console.log('value11A_js',value11A_js);
var value11B_js = JSON.parse('{{ value11B|safe }}');
console.log('value11B_js',value11B_js);
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main11'));
// 指定图表的配置项和数据
var option = {
title: {
text: '收集情况'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
top: "10%",
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
//boundaryGap: [0, 0.01],
minInterval:0.1,
min: 0,
//max: 0.7,
},
yAxis: {
type: 'category',
inverse: true,
//data: ['A部', 'B部', 'C部', 'D部', ],
data: value11A_js,
},
series: [
// {
// name: '2021',
// type: 'bar',
// data: [0.40, 0.22, 0.15, 0.77, 0.61, 0.03, 0.02]
// },
{
name: '2022',
type: 'bar',
//data: [0.22,0.03,0.09,0.40,0.15,0.09,0.02],
data: value11B_js,
}
],
itemStyle: {
//color: '#1E90FF'
color: '#4169E1'
},
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
<!--采纳情况-->
<div class="row p-2 pt-3 m-2 border" style="width: 300px;height:300px;">
<div id="main12" style="width: 100%;height:100%;"></div>
</div>
<script type="text/javascript">
//获取变量值
var value12A_js = JSON.parse('{{ value12A|safe }}');
console.log('value12A_js',value12A_js);
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main12'));
// 指定图表的配置项和数据
var option = {
dataset: [
{
dimensions: ['dept', 'count'],
source: value12A_js,
// [['Hannah Krause', 41,],
// ['Zhao Qian', 20, ],
// ['Jasmin Krause ', 52,]]
},
{
transform: {
type: 'sort',
config: { dimension: 'count', order: 'desc' }
}
}
],
title: {
text: '采纳情况',
subtext: '已核准状态',
left: 'left'
},
tooltip: {
trigger: 'item'
},
legend: {
//orient: 'vertical',
left: 'bottom'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};