ECharts 词云案例四—电影《千与千寻》部分短评
本文实现了,基于ECharts + 电影《千与千寻》部分短评 实现了好看的词云案例。
在数字时代,数据可视化已成为传达信息的重要手段。本文通过结合ECharts这一强大的数据可视化工具和Python编程语言,实现了一个创新的词云案例,以电影《千与千寻》的部分短评为基础。《千与千寻》是宫崎骏导演的一部经典动画电影,以其丰富的想象力和深刻的寓意赢得了全球观众的喜爱。
本案例的核心在于使用Python脚本处理电影短评文本,提取关键词,并计算它们的频率。通过正则表达式和自然语言处理库jieba,我们能够筛选出有意义的词汇,并通过WordCloud库生成词云图。ECharts则用于进一步展示词频数据,通过其丰富的图表类型和交互功能,使词云图更加生动和直观。
词云图不仅美观,还能直观地反映观众对电影的情感倾向和关注焦点。例如,在《千与千寻》的词云中,我们可以看到“千寻”、“无脸男”、“汤婆婆”等角色名称突出显示,这表明观众对这些角色有深刻的印象。同时,词云中的其他词汇,如“勇气”、“成长”、“冒险”等,也揭示了电影主题和观众的情感体验。
效果预览
计算词频
这一章已经在另一篇文章讲过了,有兴趣的可以去看看,如果只需要查看案例,这里会给出原始数据。
数据格式
//千与千寻短评-20页
let dataJson = [
{
"name": "宫崎骏",
"value": 82
},
{
"name": "人",
"value": 70
},
{
"name": "电影",
"value": 52
},
{
"name": "世界",
"value": 35
},
{
"name": "动画",
"value": 29
},
//这里由于篇幅原因,只给出几条
]
echarts代码
window.onload = function () {
// 初始化 ECharts 图表
var myChart = echarts.init(document.getElementById('ECharts'));
var data = dataJson;
console.log(data)
var maskTemplateImage01 = "./imgs/001.png";
var maskTemplateImage02 = "./imgs/002.png";
var maskTemplateImage03 = "./imgs/003.png";
var maskTemplateImage04 = "./imgs/004.png";
var maskTemplateImage05 = "./imgs/005.png";
var maskTemplateImage06 = "./imgs/006.png";
var maskImage = new Image();
maskImage.src = maskTemplateImage04;
var bgColor = '#012248';
//生成从minNum到maxNum的随机数
function randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break;
default:
return 0;
break;
}
}
var option = {
backgroundColor: bgColor,
title: {
left : 'center',
top: "5%" ,
text: "电影《千与千寻》部分短评",
textStyle: {
color : 'rgba(255,255,255,0.8)',
fontSize: 24,
align: 'center',
}
},
series: [{
type: 'wordCloud',
width: '80%',
height: '80%',
maskImage: maskImage,
textStyle: {
color: function (v) {
idx = randomNum(0, 19);
return colors[idx];
},
},
data: data
}],
};
maskImage.onload = function () {
// 创建一个新的 h2 元素并添加到文档
document.querySelector(".image-box").appendChild(maskImage); // 图片加载完成后添加到文档
myChart.setOption(option);
}
};