ECharts实现豆瓣电影TOP250的四个图表可视化案例
创作时间:
作者:
@小白创作中心
ECharts实现豆瓣电影TOP250的四个图表可视化案例
引用
CSDN
1.
https://m.blog.csdn.net/No_Name_Cao_Ni_Mei/article/details/139925504
本文将介绍如何使用ECharts实现豆瓣电影TOP250的四个图表可视化案例。通过柱状图、折线图和饼图,展示评价人数最多的电影、年份最多的电影数量、每年高分电影产量趋势以及各类型电影占比。文章详细描述了每个图表的设计思路和模拟数据,并提供了完整的代码实现。
思路
讲解思路,采用倒推的方式,
- 首先确定可视化图表,也就是最终的效果。
- 这样就能确定需要那些基础数据
- 根据需要的数据进行按需爬取存储。
本篇文章完成前两步。可视化图表设计 和 模拟数据。
可视化设计
柱状图:
【豆瓣电影TOP250】评价人数最多的电影top10
- 统计对象:电影评分TOP600
- 统计目的:豆瓣电影TOP250
- X轴数据:电影评价人数
- Y轴数据:电影名
【豆瓣电影TOP250】年份最多的电影数量top10
- 统计对象:电影评分TOP600的电影
- 统计目的:年份最多的电影数量top10
- X轴数据:电影数量值
- Y轴数据:电影年份值
折线图
【豆瓣电影TOP250】每年高分电影产量趋势
- 统计对象:豆瓣电影TOP250
- 统计目的:每年高分电影产量趋势
- X轴数据: 电影年份
- Y轴数据: 当年电影数量
饼图
豆瓣电影TOP250各类型电影占比
- 统计对象:豆瓣电影TOP250
- 统计目的:展示不同类型电影在评分TOP600中的比例
- 图表数据:各类型电影的数量
评价人数最多的电影top10
模拟数据
// 假设这是获取到的豆瓣电影TOP250评价人数最多的电影TOP10的数据
var movieData = [
// 电影名, 评价人数
["肖申克的救赎", 1000000],
["霸王别姬", 950000],
["阿甘正传", 900000],
["这个杀手不太冷", Math.floor(Math.random() * 800000) + 100000], // 随机生成100000到900000的评价人数
["千与千寻", Math.floor(Math.random() * 800000) + 100000],
["泰坦尼克号", Math.floor(Math.random() * 800000) + 100000],
["盗梦空间", Math.floor(Math.random() * 800000) + 100000],
["星际穿越", Math.floor(Math.random() * 800000) + 100000],
["楚门的世界", Math.floor(Math.random() * 800000) + 100000],
["三傻大闹宝莱坞", Math.floor(Math.random() * 800000) + 100000],
["忠犬八公的故事", Math.floor(Math.random() * 800000) + 100000]
];
// 确保评价人数是降序排列
movieData.sort((a, b) => b[1] - a[1]);
// 只保留评价人数最多的前10部电影
movieData = movieData.slice(0, 10);
年份最多的电影数量top10
模拟数据
// 模拟豆瓣电影TOP250的电影年份和对应的数量
var simulatedData = [];
for (let i = 1990; i <= 2020; i++) { // 假设我们只考虑1990年到2020年的电影
let count = Math.floor(Math.random() * 50) + 1; // 随机生成1到50部电影的数量
simulatedData.push([i, count]);
}
// 按照电影数量进行降序排序,获取年份最多的电影数量top10
simulatedData.sort((a, b) => a[1] - b[1]);
simulatedData = simulatedData.slice(0, 10);
// 提取X轴和Y轴的数据
var xAxisData = simulatedData.map(item => item[1]);
var yAxisData = simulatedData.map(item => item[0]);
每年高分电影产量趋势
模拟数据
// 模拟豆瓣电影TOP250每年高分电影的产量
var yearData = []; // 存储年份
var productionData = []; // 存储每年高分电影的产量
for (let i = 1990; i <= 2020; i++) {
// 随机生成1到50部电影的数量,模拟每年高分电影的产量
let count = Math.floor(Math.random() * 50) + 1;
yearData.push(i); // 添加年份到X轴数据
productionData.push(count); // 添加电影产量到Y轴数据
}
各类型电影占比
模拟数据
// 定义电影类型列表
var movieGenres = [
"剧情", "喜剧", "动作", "爱情", "科幻", "动画", "悬疑", "惊悚", "恐怖",
"纪录片", "短片", "情色", "音乐", "歌舞", "家庭", "儿童", "传记", "历史",
"战争", "犯罪", "西部", "奇幻", "冒险", "灾难", "武侠", "古装", "运动",
"黑色电影"
];
// 根据类型列表生成模拟数据
var pieChartData = movieGenres.map(function(genre) {
// 随机生成每种类型的电影数量,这里假设数量在50到500之间
var value = Math.floor(Math.random() * 451) + 50;
return {
value: value,
name: genre
};
});
完整代码
热门推荐
先让自己舒服,才是高情商的关键!很多人搞错了重点
胆囊腺肌症超过1cm时怎么办?医生提醒:这些情况需警惕
AI技术驱动教育变革:定位与受众分析
第一次酒驾会拘留吗
坚果JS7如何连接家庭影院
前端如何实现纠错
探索正阳门箭楼:历史与文化的交汇点
INFJ与INFP:人格类型差异与共鸣及喜好
为什么喜欢《鲁滨逊漂流记》?——一部跨越时空的精神史诗
摄影构图技巧大揭秘!黄金法则和三分法构图在摄影中的奇妙运用
哪些板载CPU主板性能最强?如何选择合适的主板?
10种布艺玩偶制作教程:从松鼠到美人鱼,手把手教你打造可爱手工品
怎么预防腰椎间盘突出症状
“三点支撑”和“五点支撑”锻炼腰背肌肉力量的功与过
铜缆与网线:数字时代的信息高速公路
2025级初一语文分层教学:如何提升学生成绩?
钨的回收:技术、效益与应用前景
应届毕业生落户广州攻略
破产保护:企业如何在危机中重生与转型?
枇杷膏别乱喝!这种咳嗽不能用 2穴位止咳化痰很有效
人工智能翻译技术发展现状及未来展望
印第安人与中国人:相似的外貌与文化的背后
普雷斯顿和阿斯顿维拉赛事分享3.30前瞻
文科生又可以报考医学专业了!
江西赣州客家围屋的建筑特色
高速公路跨江桥梁安全监测面临的挑战及应对
青椒、红椒、黄椒其实是同一种?颜色不同,营养也不同!
《易经》中的“大人虎变”与“君子豹变”:变革与成长的智慧
小电流接地故障选线与定位技术
冰箱选购全攻略:从材质到技术,一文读懂如何挑选理想冰箱