问题遇到的现象和发生背景
在运行一个django项目过程中,子页面无法打不开,配置什么好像都是正常的,百思不得其解。求朋友们帮忙给看看怎么解决。
问题相关代码,请勿粘贴截图
view.py中代码:
def chart1(request):
chartMedicine = Medicine.objects.all()[0:15]
name_list = []
used_list = []
now_list = []
for medicine in chartMedicine:
name_list.append(medicine.name)
used_list.append(medicine.usedtotal)
now_list.append(medicine.nowtotal)
# 每天计数
chartBorrow = Borrow.objects.extra({'boDate': "date(boDate)"}).values_list('boDate').annotate(count=Count('id'))
bo_list = []
count_list = []
for bo in chartBorrow:
bo_list.append(bo[0].strftime('%Y-%m-%d'))
count_list.append(bo[1])
content = {
'name_list': name_list,
'used_list': used_list,
'now_list': now_list,
'bo_list': bo_list,
'count_list': count_list,
}
return render(request, 'lms/chart1.html', content)
urls.py中代码:
from django.conf import settings
from django.conf.urls.static import static
from django.urls import path
from . import views
from django.contrib import admin
app_name = 'LP'
urlpatterns = [
path('chart1/', views.chart1, name='chart1'),
]
chart1.html代码:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart1Test</title>
<script src="{% static 'lms/js/echarts.min.js' %}" charset="utf-8"></script>
{# <script crossorigin="anonymous"#}
{# integrity="sha512-UN8wX5Zf4Af6/2UJOYTYyWLHdua4SWMd1pnIxNoDCtqdaAMk1TQdvwwgoG7ShvuOS1d9jCerLNzwfvRmL7N4iA=="#}
{# src="https://lib.baomitu.com/echarts/5.2.0/echarts.min.js"></script>#}
</head>
<body>
<h1> 可视化图表Charts </h1>
{#chart1#}
<div class="col-md-6" id="main1" style="width: 50%;height:400px;float:left;"></div>
<script type="text/javascript">
var chartDom = document.getElementById('main1');
var myChart;
var option;
if (myChart) {
myChart.dispose(); // 清空
// 或者
// myChart.removeAttribute("_echarts_instance_"); // 移除容器上的 _echarts_instance
}
myChart = echarts.init(chartDom);
option = {
title: {
text: '药品数据可视化'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
},
yAxis: {
type: 'category',
{#data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']#}
data:{{ name_list|safe }}
},
series: [
{
name: '已使用量',
type: 'bar',
{#data: [101, 21, 21, 2, 556, 4,]#}
data: {{ used_list }}
},
{
name: '剩余量',
type: 'bar',
{#data: [1, 241, 1, 20, 56, 100,]#}
data: {{ now_list }}
}
]
};
option && myChart.setOption(option);
</script>
{#chart2#}
<div class="col-md-6" id="main2" style="width: 50%;height:400px;float:right;"></div>
<script type="text/javascript">
var chartDom = document.getElementById('main2');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '最近借用总次数情况',
subtext: ' '
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
// prettier-ignore
data:{{ bo_list|safe }}
{#data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']#}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} 次'
},
axisPointer: {
snap: true
}
},
visualMap: {
show: false,
dimension: 0,
pieces: [
{
lte: 6,
color: 'green'
},
{
gt: 6,
lte: 8,
color: 'red'
},
{
gt: 8,
lte: 14,
color: 'green'
},
{
gt: 14,
lte: 17,
color: 'red'
},
{
gt: 17,
color: 'green'
}
]
},
series: [
{
name: '次数',
type: 'line',
smooth: true,
// prettier-ignore
{#data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],#}
data:{{ count_list }},
markArea: {
itemStyle: {
color: 'rgba(255, 173, 177, 0.4)'
},
data: [
[
{
name: 'Morning Peak',
xAxis: '07:30'
},
{
xAxis: '10:00'
}
],
[
{
name: 'Evening Peak',
xAxis: '17:30'
},
{
xAxis: '21:15'
}
]
]
}
}
]
};
option && myChart.setOption(option);
</script>
<footer class="panel-footer" style="width: 100%; overflow: hidden;">
<div class="container">
<hr style="border: 1px solid #000000;">
<div class="row" style="text-align: center;">
<div class="col-sm-3 col-md-3 col-lg-3">
<a href="https://gitee.com/zcystart/chemlab.git" style=" color: gray;">ChanceZhou</a>
</div>
</div>
</div>
</footer>
</body>
</html>
运行结果及报错内容
运行log显示:
我的解答思路和尝试过的方法
在日志中发现chart1与HTTP之间少了个斜杆,怀疑是否重顶线的问题,但没解决。
我想要达到的结果
点击子页面能保证页面正常显示。