本来想实现在下述的index.html中单击左边的菜单栏实现右边div块的刷新，然后参考了一个博主的代码，自己改了改，大概如下：
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>主页面</title>
<link rel="stylesheet" href="/static/css/bootstrap.css">
<link rel="stylesheet" href="/static/css/nprogress.css">
<script src="/static/js/nprogress.js"></script>
</head>
<body>
<div class="container pt-4">
<h1>会员中心</h1>
<hr>
<div class="row">
<aside class="col-md-3">
<div class="list-group">
<a class="list-group-item list-group-item-action" href="/cb/refresh/">个人信息</a>
<a class="list-group-item list-group-item-action" href="/cb/work/">工作经验</a>
<a class="list-group-item list-group-item-action" href="/cb/live/">图表展示</a>
</div>
</aside>
<main id="main" class="col-md-9" style="width: 800px">
<h2>这是我的个人信息界面</h2>
<hr>
<div id="container"></div>
</main>
</div>
</div>
<script src="/static/js/jquery.min.js"></script>
<script>
$(function ($) {
// 入口函数带参数$,原因是有一个独立的作用域，顺便确保页面加载完成执行
//全局AJAX事件处理
$(document)
.ajaxStart(function () {
NProgress.start()
})
.ajaxStop(function () {
NProgress.done()
});
$('.list-group-item').on('click', function () {
var url = $(this).attr('href')
//后面的 #main 指的是载入页面的 id
$('#main').load(url + ' #main > *')
//列表组中是 a 标签，禁止它跳转到相应界面
return false
})
})
</script>
</body>
</html>
work.html(在django中配的路由是/cb/work/)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>主页面</title>
</head>
<body>
<main id="main">
<h2>这是工作经验界面</h2>
<hr>
<img src="/static/image/banner.jpg">
</main>
</body>
</html>
live.html
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=bar-polar-label-tangential
-->
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<link rel="stylesheet" href="/static/css/bootstrap.css">
<script src="/static/js/jquery.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<div id="main" class="col-md-9" style="width: 800px">
<div id="container" style="height:500px;width: 500px"></div>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
title: [
{
text: '活动物(或动物产品)'
}
],
polar: {
radius: [30, '50%']
},
angleAxis: {
max: 5000,
startAngle: 0
},
radiusAxis: {
type: 'category',
data: [
'活动物',
'肉及食用杂碎',
'鱼、甲壳动物、软体动物及其他水生无脊椎动物',
'乳品蛋品天然蜂蜜;其他',
'其他动物产品'
]
},
tooltip: {},
series: {
type: 'bar',
data: [4556.46, 85.44, 2148.47, 1598.69, 544.29, 179.58],
coordinateSystem: 'polar',
label: {
show: false,
position: 'middle',
formatter: '{b}: {c}'
}
}
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</div>
</body>
</html>
单击左侧”工作经验“时 work.html可以刷新出来
但是单击左侧”图表展示“时，右侧加载不出live.html,为这样：
而该网页本来是可以显示图的：
想要问问是为什么
参考文章：https://blog.csdn.net/weixin_40292154/article/details/105963037#comments_20371925
