【开源】2024最新python豆瓣电影数据爬虫+可视化分析项目 ...

项目先容

【开源】项目基于python+pandas+flask+mysql等技术实现豆瓣电影数据获取及可视化分析展示，以为有用的朋友可以来个一键三连，感谢！！！
项目演示


     【开源】2024最新python豆瓣电影数据爬虫+可视化分析项目
  
项目截图

• 首页
  
  
  
  
• 列表页
  
  
  
  
• 爬虫演示
  
  
  
  

项目地点

https://github.com/mudfish/python-douban-view
项目布局

焦点模块

电影爬虫

2. """
3. 异步并发爬虫
4. """
6. # 本次运行获取的最大页数
7. MAX_PAGES = 5
8. # 进度控制文件
9. PAGE_PROGRESS_FILE = "page_progress.json"
10. # 电影类型
11. MOVIE_TYPES = ["剧情", "喜剧", "动作", "爱情", "科幻", "动画"]
12. # CSV文件名
13. CSV_NAME = "movie_data.csv"
14. # CSV头
15. CSV_HEADS = [
16.     "id",
17.     "movie_id",
18.     "title",
19.     "year",
20.     "directors",
21.     "casts",
22.     "rating",
23.     "cover",
24.     "country",
25.     "summary",
26.     "types",
27.     "lang",
28.     "release_date",
29.     "time",
30.     "url",
31. ]
32. # 上映日期匹配正则，剔除非数字和-
33. RELEASE_DATE_REMOVE_RE = r"[^0-9-]"
35. engine = create_engine("mysql+pymysql://root:123456@127.0.0.1:3306/db_douban")
38. def get_id():
39.     return str(random.randint(1, 100000000)) + str(time.time()).split(".")[1].strip()
42. class Spider:
43.     def __init__(self):
44.         self.movie_page_url = "https://m.douban.com/rexxar/api/v2/movie/recommend?"
45.         self.movie_detail_url = "https://movie.douban.com/subject/{}/"
46.         self.headers = {
47.             "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36",
48.             "Referer": "https://movie.douban.com/explore",
49.         }
50.         self.movie_types = MOVIE_TYPES
51.         self.page_progress = {}
52.         # 需要抓取的页面数
53.         self.total_pages = 0
54.         self.completed_pages = 0
55.         self.global_progress_bar = None
57.     def init(self):
58.         # 每次跑之前，先删除之前的csv文件
59.         if os.path.exists(CSV_NAME):
60.             os.remove(CSV_NAME)
61.         with open(CSV_NAME, "w", newline="", encoding="utf-8") as writer_f:
62.             writer = csv.writer(writer_f)
63.             writer.writerow(CSV_HEADS)
65.     def load_page_progress(self):
66.         if os.path.exists(PAGE_PROGRESS_FILE):
67.             with open(PAGE_PROGRESS_FILE, "r", encoding="utf-8") as f:
68.                 # 判断文件内容是否为空
69.                 if os.stat(PAGE_PROGRESS_FILE).st_size == 0:
70.                     # 初始化页面进度
71.                     print("初始化页面进度")
72.                     self.page_progress = {}
73.                     self.save_page_progress()
74.                 else:
75.                     self.page_progress = json.load(f)
77.     def save_page_progress(self):
78.         with open(PAGE_PROGRESS_FILE, "w", encoding="utf-8") as f:
79.             json.dump(self.page_progress, f, ensure_ascii=False)
81.     async def get_movie_pages(self, session, type_name):
82.         start_page = self.page_progress.get(type_name, 1)
83.         if start_page <= MAX_PAGES:
84.             for page in range(start_page, MAX_PAGES + 1):
85.                 # print(f'{type_name}第{page}页：')
86.                 start_time = time.time()
87.                 params = {"start": (page - 1) * 20, "count": 10, "tags": type_name}
88.                 try:
89.                     async with session.get(
90.                         self.movie_page_url, headers=self.headers, params=params
91.                     ) as resp:
92.                         resp.raise_for_status()
93.                         respJson = await resp.json()
94.                         movie_list = respJson["items"]
95.                         for i, m in enumerate(movie_list):
96.                             if m["type"] == "movie":
97.                                 await self.process_movie(session, m)
98.                                 # progress_bar.update(round(1/len(movie_list)))
99.                         self.page_progress[type_name] = page + 1
100.                         # 记录进度
101.                         self.save_page_progress()
102.                         # 刷新全局进度
103.                         self.update_global_progress()
104.                 except Exception as e:
105.                     print(f"处理:{type_name}第{page}页失败: {e}")
106.                     traceback.print_exc()
107.                     continue
109.     async def process_movie(self, session, movie):
110.         movie_data = []
111.         movie_data.append(get_id())
112.         movie_data.append(movie["id"])
113.         movie_data.append(movie["title"])
114.         movie_data.append(movie["year"])
115.         async with session.get(
116.             self.movie_detail_url.format(movie["id"]), headers=self.headers
117.         ) as resp:
118.             resp.raise_for_status()
119.             html_text = await resp.text()
120.         path = etree.HTML(html_text)
121.         # 导演
122.         movie_data.append(",".join(path.xpath('//a[@rel="v:directedBy"]/text()')))
123.         # 主演
124.         movie_data.append(",".join(path.xpath('//a[@rel="v:starring"]/text()')))
125.         # 评分
126.         movie_data.append(path.xpath('//strong[@property="v:average"]/text()')[0])
127.         # 封面
128.         movie_data.append(path.xpath('//img[@rel="v:image"]/@src')[0])
129.         # 国家
130.         movie_data.append(
131.             path.xpath(
132.                 '//span[contains(text(),"制片国家")]/following-sibling::br[1]/preceding-sibling::text()[1]'
133.             )[0].replace(" / ", ",")
134.         )
135.         # 摘要
136.         movie_data.append(path.xpath('//span[@property="v:summary"]/text()')[0].strip())
137.         # 类型
138.         movie_data.append(
139.             ",".join(path.xpath('//div[@id="info"]/span[@property="v:genre"]/text()'))
140.         )
141.         # 语言
142.         movie_data.append(
143.             path.xpath(
144.                 '//span[contains(text(),"语言")]/following-sibling::br[1]/preceding-sibling::text()[1]'
145.             )[0]
146.         )
147.         # 上映日期
148.         movie_data.append(
149.             re.sub(
150.                 RELEASE_DATE_REMOVE_RE,
151.                 "",
152.                 path.xpath('//span[@property="v:initialReleaseDate"]/text()')[0][:10],
153.             )
154.         )
155.         # 时长（空处理）
156.         # print(movie["id"])
157.         movie_time = path.xpath('//span[@property="v:runtime"]/text()')
158.         if len(movie_time) > 0:
159.             movie_data.append(movie_time[0])
160.         else:
161.             movie_data.append("")
162.         # url
163.         movie_data.append(self.movie_detail_url.format(movie["id"]))
164.         self.save_to_csv(movie_data)
166.     def save_to_csv(self, row):
167.         with open(CSV_NAME, "a", newline="", encoding="utf-8") as f:
168.             writer = csv.writer(f)
169.             writer.writerow(row)
171.     def clean_csv(self):
172.         print("===========清理数据============")
173.         df = pd.read_csv(CSV_NAME, encoding="utf-8")
174.         df.drop_duplicates(subset=["movie_id"], keep="first", inplace=True)
175.         print("存储到数据库...")
176.         df.to_sql("tb_movie", con=engine, index=False, if_exists="append")
177.         print("清理重复数据...")
178.         engine.connect().execute(
179.             text(
180.                 "delete t1 from tb_movie t1 inner join (select min(id) as id,movie_id from tb_movie group by movie_id having count(*) > 1) t2 on t1.movie_id=t2.movie_id where t1.id>t2.id"
181.             )
182.         )
184.     def update_global_progress(self):
185.         self.completed_pages += 1
186.         # print(self.completed_pages)
187.         self.global_progress_bar.update(1)
188.         self.global_progress_bar.refresh()
190.     async def run(self):
191.         self.init()
192.         self.load_page_progress()
193.         # self.total_pages = MAX_PAGES*len(MOVIE_TYPES) - sum(self.page_progress.get(type_name, 1) for type_name in MOVIE_TYPES)
194.         for type_name in MOVIE_TYPES:
195.             if MAX_PAGES > self.page_progress.get(type_name, 1):
196.                 self.total_pages += MAX_PAGES + 1 - self.page_progress.get(type_name, 1)
197.         print(self.total_pages)
198.         if self.total_pages > 0:
199.             self.global_progress_bar = tqdm(
200.                 total=self.total_pages, desc="progress", unit="page", colour="GREEN"
201.             )
203.             async with aiohttp.ClientSession() as session:
204.                 tasks = [
205.                     self.get_movie_pages(session, type_name)
206.                     for type_name in self.movie_types
207.                 ]
208.                 await asyncio.gather(*tasks)
209.             # 请求结束后，清空页面进度
210.             # self.page_progress = {}
211.             # self.save_page_progress()
212.             self.global_progress_bar.close()
213.             self.clean_csv()
216. if __name__ == "__main__":
217.     loop = asyncio.get_event_loop()
218.     spider = Spider()
219.     loop.run_until_complete(spider.run())

复制代码

电影可视化

接口代码

1. from flask import Flask, render_template, request, redirect, url_for, session
2. from utils import db_query
5. app = Flask(__name__)
6. app.secret_key = "mysessionkey"
9. # 统一请求拦截
10. @app.before_request
11. def before_request():
12.     # 利用正则匹配，如果/static开头和/login, /logout,/register的请求，则不拦截;其他的判断是否已登录
13.     if (
14.         request.path.startswith("/static")
15.         or request.path == "/login"
16.         or request.path == "/logout"
17.         or request.path == "/register"
18.     ):
19.         return
20.     # 如果没有登录，则跳转到登录页面
21.     if not session.get("login_username"):
22.         return redirect(url_for("login"))
25. # 首页
26. @app.route("/")
27. def index():
28.     # 获取电影统计数据
29.     movie_stats = db_query.fetch_movie_statistics()
30.     # 获取电影分类统计
31.     movie_type_distribution = db_query.fetch_movie_type_distribution()
32.     # 获取电影评分统计
33.     movie_rating_distribution = db_query.fetch_movie_rating_distribution()
34.     print(movie_rating_distribution)
35.     return render_template(
36.         "index.html",
37.         login_username=session.get("login_username"),
38.         movie_stats=movie_stats,
39.         movie_type_distribution=movie_type_distribution,
40.         movie_rating_distribution=movie_rating_distribution,
41.     )
44. # 登录
45. @app.route("/login", methods=["GET", "POST"])
46. def login():
47.     if request.method == "POST":
48.         req_params = dict(request.form)
49.         # 判断用户名密码是否正确
50.         sql = "SELECT * FROM `tb_user` WHERE `username` = %s AND `password` = %s"
51.         params = (req_params["username"], req_params["password"])
52.         if len(db_query.query(sql, params)) > 0:
53.             # 存储session
54.             session["login_username"] = req_params["username"]
55.             return redirect(url_for("index"))
56.         else:
57.             return render_template(
58.                 "error.html",
59.                 error="用户名或密码错误",
60.             )
61.     elif request.method == "GET":
62.         return render_template("login.html")
65. # 退出
66. @app.route("/logout")
67. def logout():
68.     session.pop("login_username", None)
69.     return redirect(url_for("index"))
72. # 注册
73. @app.route("/register", methods=["GET", "POST"])
74. def register():
75.     if request.method == "POST":
76.         req_params = dict(request.form)
77.         if req_params["password"] == req_params["password_confirm"]:
78.             # 判断是否已存在该用户名
79.             sql = "SELECT * FROM `tb_user` WHERE `username` = %s"
80.             params = (req_params["username"],)
81.             result = db_query.query(sql, params)
82.             if len(result) > 0:
83.                 return render_template(
84.                     "error.html",
85.                     error="用户名已存在",
86.                 )
87.             sql = "INSERT INTO `tb_user` (`username`, `password`) VALUES (%s, %s)"
88.             params = (
89.                 req_params["username"],
90.                 req_params["password"],
91.             )
92.             db_query.query(sql, params, db_query.QueryType.NO_SELECT)
93.             return redirect(url_for("login"))
94.         else:
95.             return render_template(
96.                 "error.html",
97.                 error="两次密码输入不一致",
98.             )
99.     elif request.method == "GET":
100.         return render_template("register.html")
103. @app.route("/list")
104. def movie_list():
105.     # 查询数据库获取电影列表
106.     movies = db_query.fetch_movie_list()  # 假设此函数返回一个包含电影信息的列表
107.     # 渲染并返回list.html，同时传递movies数据
108.     return render_template(
109.         "list.html", login_username=session.get("login_username"), movies=movies
110.     )
113. @app.errorhandler(404)
114. def page_not_found(error):
115.     return render_template("404.html"), 404
118. @app.errorhandler(500)
119. def system_error(error):
120.     return render_template("500.html"), 500
123. if __name__ == "__main__":
124.     # 静态文件缓存自动刷新
125.     app.jinja_env.auto_reload = True
126.     app.run(host="127.0.0.1", port=8002, debug=True)

复制代码

首页

1. <!DOCTYPE html>
2. <html lang="en">
3.   <head>
4.     <meta charset="utf-8" />
5.     <meta http-equiv="X-UA-Compatible"
6.     content="IE=edge" />
7.     <meta
8.       name="viewport"
9.       content="width=device-width, initial-scale=1, shrink-to-fit=no"
10.     />
11.     <meta name="description" content="" />
12.     <meta name="author" content="" />
14.     <title>首页</title>
16.     <!-- Custom fonts for this template-->
17.     <link
18.       href="/static/vendor/fontawesome-free/css/all.min.css"
19.       rel="stylesheet"
20.       type="text/css"
21.     />
22.     <link
23.       href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
24.       rel="stylesheet"
25.     />
27.     <!-- Custom styles for this template-->
28.     <link href="/static/css/sb-admin-2.min.css" rel="stylesheet" />
29.   </head>
31.   <body id="page-top">
32.     <!-- Page Wrapper -->
33.     <div id="wrapper">
34.       <!-- Sidebar -->
35.       <ul
36.         class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion"
37.         id="accordionSidebar"
38.       >
39.         <!-- Sidebar - Brand -->
40.         <a
41.           class="sidebar-brand d-flex align-items-center justify-content-center"
42.           href="index.html"
43.         >
44.           <div class="sidebar-brand-icon rotate-n-15">
45.             <i class="fas fa-laugh-wink"></i>
46.           </div>
47.           <div class="sidebar-brand-text mx-3">豆瓣电影可视化</div>
48.         </a>
50.         <!-- Divider -->
51.         <hr class="sidebar-divider my-0" />
53.         <!-- Nav Item - Dashboard -->
54.         <li class="nav-item active">
55.           <a class="nav-link" href="/">
56.             <i class="fas fa-fw fa-tachometer-alt"></i>
57.             <span>首页</span></a
58.           >
59.         </li>
61.         <!-- 列表 -->
62.         <li class="nav-item">
63.           <a class="nav-link" href="/list">
64.             <i class="fas fa-fw fa-table"></i>
65.             <span>电影列表</span></a
66.           >
67.         </li>
69.         <!-- Divider -->
70.         <hr class="sidebar-divider d-none d-md-block" />
72.         <!-- Sidebar Toggler (Sidebar) -->
73.         <div class="text-center d-none d-md-inline">
74.           <button class="rounded-circle border-0" id="sidebarToggle"></button>
75.         </div>
76.       </ul>
77.       <!-- End of Sidebar -->
79.       <!-- Content Wrapper -->
80.       <div id="content-wrapper" class="d-flex flex-column">
81.         <!-- Main Content -->
82.         <div id="content">
83.           <!-- Topbar -->
84.           <nav
85.             class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow"
86.           >
87.             <!-- Sidebar Toggle (Topbar) -->
88.             <button
89.               id="sidebarToggleTop"
90.               class="btn btn-link d-md-none rounded-circle mr-3"
91.             >
92.               <i class="fa fa-bars"></i>
93.             </button>
95.             <!-- Topbar Search -->
96.             <!-- <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
97.             <div class="input-group">
98.               <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
99.               <div class="input-group-append">
100.                 <button class="btn btn-primary" type="button">
101.                   <i class="fas fa-search fa-sm"></i>
102.                 </button>
103.               </div>
104.             </div>
105.           </form> -->
107.             <!-- Topbar Navbar -->
108.             <ul class="navbar-nav ml-auto">
109.               <div class="topbar-divider d-none d-sm-block"></div>
111.               <!-- Nav Item - User Information -->
112.               <li class="nav-item dropdown no-arrow">
113.                 <a
114.                   class="nav-link dropdown-toggle"
115.                   href="#"
116.                   id="userDropdown"
117.                   role="button"
118.                   data-toggle="dropdown"
119.                   aria-haspopup="true"
120.                   aria-expanded="false"
121.                 >
122.                   <span class="mr-2 d-none d-lg-inline text-gray-600 small"
123.                     >{{login_username}}</span
124.                   >
125.                   <img
126.                     class="img-profile rounded-circle"
127.                     src="/static/img/avatar.png"
128.                   />
129.                 </a>
130.                 <!-- Dropdown - User Information -->
131.                 <div
132.                   class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
133.                   aria-labelledby="userDropdown"
134.                 >
135.                   <a
136.                     class="dropdown-item"
137.                     href="#"
138.                     data-toggle="modal"
139.                     data-target="#logoutModal"
140.                   >
141.                     <i
142.                       class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"
143.                     ></i>
144.                     Logout
145.                   </a>
146.                 </div>
147.               </li>
148.             </ul>
149.           </nav>
150.           <!-- End of Topbar -->
152.           <!-- Begin Page Content -->
153.           <div class="container-fluid">
154.             <!-- Page Heading -->
155.             <!-- <div class="d-sm-flex align-items-center justify-content-between mb-4">
156.             <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
157.             <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a>
158.           </div> -->
160.             <!-- Content Row -->
161.             <div class="row">
162.               <!-- Earnings (Monthly) Card Example -->
163.               <div class="col-xl-3 col-md-6 mb-4">
164.                 <div class="card border-left-primary shadow h-100 py-2">
165.                   <div class="card-body">
166.                     <div class="row no-gutters align-items-center">
167.                       <div class="col mr-2">
168.                         <div
169.                           class="font-weight-bold text-primary text-uppercase mb-1"
170.                         >
171.                           电影总数
172.                         </div>
173.                         <div class="h5 mb-0 font-weight-bold text-gray-800">
174.                           {{ movie_stats['total_movies'] }}
175.                         </div>
176.                       </div>
177.                       <div class="col-auto">
178.                         <i class="fas fa-calendar fa-2x text-gray-300"></i>
179.                       </div>
180.                     </div>
181.                   </div>
182.                 </div>
183.               </div>
185.               <!-- Earnings (Monthly) Card Example -->
186.               <div class="col-xl-3 col-md-6 mb-4">
187.                 <div class="card border-left-success shadow h-100 py-2">
188.                   <div class="card-body">
189.                     <div class="row no-gutters align-items-center">
190.                       <div class="col mr-2">
191.                         <div
192.                           class="font-weight-bold text-success text-uppercase mb-1"
193.                         >
194.                           电影最高评分
195.                         </div>
196.                         <div class="h5 mb-0 font-weight-bold text-gray-800">
197.                           {{ movie_stats['highest_rating'] }}
198.                         </div>
199.                       </div>
200.                       <div class="col-auto">
201.                         <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
202.                       </div>
203.                     </div>
204.                   </div>
205.                 </div>
206.               </div>
208.               <!-- Earnings (Monthly) Card Example -->
209.               <div class="col-xl-3 col-md-6 mb-4">
210.                 <div class="card border-left-info shadow h-100 py-2">
211.                   <div class="card-body">
212.                     <div class="row no-gutters align-items-center">
213.                       <div class="col mr-2">
214.                         <div
215.                           class="font-weight-bold text-info text-uppercase mb-1"
216.                         >
217.                           出演最多演员
218.                         </div>
219.                         <div class="row no-gutters align-items-center">
220.                           <div class="col-auto">
221.                             <div
222.                               class="h5 mb-0 mr-3 font-weight-bold text-gray-800"
223.                             >
224.                               {{ movie_stats['most_popular_cast'] }}
225.                             </div>
226.                           </div>
227.                           <div class="col">
228.                             <div class="progress progress-sm mr-2">
229.                               <div
230.                                 class="progress-bar bg-info"
231.                                 role="progressbar"
232.                                 style="width: 50%"
233.                                 aria-valuenow="50"
234.                                 aria-valuemin="0"
235.                                 aria-valuemax="100"
236.                               ></div>
237.                             </div>
238.                           </div>
239.                         </div>
240.                       </div>
241.                       <div class="col-auto">
242.                         <i
243.                           class="fas fa-clipboard-list fa-2x text-gray-300"
244.                         ></i>
245.                       </div>
246.                     </div>
247.                   </div>
248.                 </div>
249.               </div>
251.               <!-- Pending Requests Card Example -->
252.               <div class="col-xl-3 col-md-6 mb-4">
253.                 <div class="card border-left-warning shadow h-100 py-2">
254.                   <div class="card-body">
255.                     <div class="row no-gutters align-items-center">
256.                       <div class="col mr-2">
257.                         <div
258.                           class="font-weight-bold text-warning text-uppercase mb-1"
259.                         >
260.                           制片最多国家
261.                         </div>
262.                         <div class="h5 mb-0 font-weight-bold text-gray-800">
263.                           {{ movie_stats['most_common_country'] }}
264.                         </div>
265.                       </div>
266.                       <div class="col-auto">
267.                         <i class="fas fa-comments fa-2x text-gray-300"></i>
268.                       </div>
269.                     </div>
270.                   </div>
271.                 </div>
272.               </div>
273.             </div>
275.             <!-- Content Row -->
277.             <div class="row">
278.               <!-- Area Chart -->
279.               <div class="col-xl-6 col-lg-6">
280.                 <div class="card shadow mb-4">
281.                   <!-- Card Header - Dropdown -->
282.                   <div
283.                     class="card-header py-3 d-flex flex-row align-items-center justify-content-between"
284.                   >
285.                     <h6 class="m-0 font-weight-bold text-primary">
286.                       电影分类统计
287.                     </h6>
288.                   </div>
289.                   <!-- Card Body -->
290.                   <div class="card-body">
291.                     <div
292.                       id="movie_type_chart"
293.                       style="width: 100%; height: 450px"
294.                     ></div>
295.                     <!-- <div class="chart-area">
296.                      
297.                     </div> -->
298.                   </div>
299.                 </div>
300.               </div>
302.               <!-- Line Chart -->
303.               <div class="col-xl-6 col-lg-6">
304.                 <div class="card shadow mb-4">
305.                   <!-- Card Header - Dropdown -->
306.                   <div
307.                     class="card-header py-3 d-flex flex-row align-items-center justify-content-between"
308.                   >
309.                     <h6 class="m-0 font-weight-bold text-primary">
310.                       电影评分统计
311.                     </h6>
312.                     <div class="dropdown no-arrow">
313.                       <a
314.                         class="dropdown-toggle"
315.                         href="#"
316.                         role="button"
317.                         id="dropdownMenuLink"
318.                         data-toggle="dropdown"
319.                         aria-haspopup="true"
320.                         aria-expanded="false"
321.                       >
322.                         <i
323.                           class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"
324.                         ></i>
325.                       </a>
326.                       <div
327.                         class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
328.                         aria-labelledby="dropdownMenuLink"
329.                       >
330.                         <div class="dropdown-header">Dropdown Header:</div>
331.                         <a class="dropdown-item" href="#">Action</a>
332.                         <a class="dropdown-item" href="#">Another action</a>
333.                         <div class="dropdown-divider"></div>
334.                         <a class="dropdown-item" href="#"
335.                           >Something else here</a
336.                         >
337.                       </div>
338.                     </div>
339.                   </div>
340.                   <!-- Card Body -->
341.                   <div class="card-body">
342.                     <div
343.                     id="movie_score_chart"
344.                     style="width: 100%; height: 450px"
345.                   ></div>
346.                   </div>
347.                 </div>
348.               </div>
349.             </div>
351.             <!-- Content Row -->
352.            
353.           </div>
354.           <!-- /.container-fluid -->
355.         </div>
356.         <!-- End of Main Content -->
358.         <!-- Footer -->
359.         <footer class="sticky-footer bg-white">
360.           <div class="container my-auto">
361.             <div class="copyright text-center my-auto">
362.               <span
363.                 >@Laoxu Open Source.<a
364.                   target="_blank"
365.                   href="https://github.com/mudfish"
366.                   >Github</a
367.                 ></span
368.               >
369.             </div>
370.           </div>
371.         </footer>
372.         <!-- End of Footer -->
373.       </div>
374.       <!-- End of Content Wrapper -->
375.     </div>
376.     <!-- End of Page Wrapper -->
378.     <!-- Scroll to Top Button-->
379.     <a class="scroll-to-top rounded" href="#page-top">
380.       <i class="fas fa-angle-up"></i>
381.     </a>
383.     <!-- Logout Modal-->
384.     <div
385.       class="modal fade"
386.       id="logoutModal"
387.       tabindex="-1"
388.       role="dialog"
389.       aria-labelledby="exampleModalLabel"
390.       aria-hidden="true"
391.     >
392.       <div class="modal-dialog" role="document">
393.         <div class="modal-content">
394.           <div class="modal-header">
395.             <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
396.             <button
397.               class="close"
398.               type="button"
399.               data-dismiss="modal"
400.               aria-label="Close"
401.             >
402.               <span aria-hidden="true">×</span>
403.             </button>
404.           </div>
405.           <!-- <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div> -->
406.           <div class="modal-footer">
407.             <button
408.               class="btn btn-secondary"
409.               type="button"
410.               data-dismiss="modal"
411.             >
412.               Cancel
413.             </button>
414.             <a class="btn btn-primary" href="/logout">Logout</a>
415.           </div>
416.         </div>
417.       </div>
418.     </div>
420.     <!-- Bootstrap core JavaScript-->
421.     <script src="/static/vendor/jquery/jquery.min.js"></script>
422.     <script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
424.     <!-- Core plugin JavaScript-->
425.     <script src="/static/vendor/jquery-easing/jquery.easing.min.js"></script>
427.     <!-- Custom scripts for all pages-->
428.     <script src="/static/js/sb-admin-2.min.js"></script>
430.     <!-- Page level plugins -->
431.     <script src="/static/vendor/chart.js/Chart.min.js"></script>
433.     <!-- Page level custom scripts -->
434.     <script src="/static/js/demo/chart-area-demo.js"></script>
435.     <script src="/static/js/demo/chart-pie-demo.js"></script>
437.     <script src="/static/js/echarts.min.js"></script>
439.     <script>
440.       var chartDom = document.getElementById("movie_type_chart");
441.       var myChart = echarts.init(chartDom);
442.       var option;
443.       var movieTypeData = {{ movie_type_distribution|tojson }};
444.       // console.log(movieTypeData)
446.       option = {
447.         title: {
448.           text: "",
449.           subtext: "来源：豆瓣数据",
450.           left: "center",
451.         },
452.         tooltip: {
453.           trigger: "item",
454.         },
455.         legend: {
456.           orient: "vertical",
457.           left: "left",
458.         },
459.         series: [
460.           {
461.             name: "Access From",
462.             type: "pie",
463.             radius: "50%",
464.             data: movieTypeData,
465.             emphasis: {
466.               itemStyle: {
467.                 shadowBlur: 10,
468.                 shadowOffsetX: 0,
469.                 shadowColor: "rgba(0, 0, 0, 0.5)",
470.               },
471.             },
472.           },
473.         ],
474.       };
476.       option && myChart.setOption(option);
477.     </script>
479.     <script>
480.       var chartDom = document.getElementById("movie_score_chart");
481.       var myChart = echarts.init(chartDom);
482.       var option;
483.       var ratingData = {{ movie_rating_distribution|tojson }};
484.       console.log(ratingData)
486.       option = {
487.         title: {
488.           text: "",
489.           subtext: "来源：豆瓣数据",
490.           left: "center",
491.         },
492.         xAxis: {
493.           type: "category",
494.           boundaryGap: false,
495.           data: ratingData.map(item => item[0]),
496.         },
497.         yAxis: {
498.           type: "value",
499.         },
500.         series: [
501.           {
502.             data: ratingData.map(item => item[1]),
503.             type: "line",
504.             areaStyle: {},
505.           },
506.         ],
507.         tooltip: {
508.               trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
509.               axisPointer: {// 坐标轴指示器，坐标轴触发有效
510.                 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
511.               }
512.             },
513.       };
515.       option && myChart.setOption(option);
516.     </script>
517.   </body>
518. </html>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。