大多数消费者在选择团购网站消费侯后会做出相应评价,从而产生海量的交易数据。这些数据包含了消费者对饮食比较全面的主观性评价和量化评分,因此通过对此类餐饮数据的分析能够有效洞悉城市餐饮消费行为。而由于该类数据体量大、数据类型多等特点,使得传统的数据分析技术已经难以有效进行分析处理。如何将可视分析技术应用于团购网站餐饮类数据分析,探索城市消费行为是一个新颖的研究课题。提供某团购网站绵阳市2015.1.1至2015.11.11期间3623家餐饮类店铺数据的基本信息及30572条评论信息。包含两个数据表:店铺基本信息表和评论属性表。
店铺基本信息表中包含: 店铺id、店铺名称、店铺星级、服务评分、口味评分、环境评分、评论数量、店铺地址、店铺类型等。
评论属性表中包含: 评论id、用户id、店铺id、综合评分、口味评分、环境评分、服务评分、评论内容(构建词云、关键词提取)、评论时间、用户名、用户等级等。
【地图】 点的大小表示店的综合评价(根据评论数和评分定)
【绵阳各月份消费情况】折线图:餐饮类别为折线条数,x为月份,y为消费数
【针对餐饮类别的区域分布】格格图:分两层,第一层为:餐饮类别,第二层为:区域所占比例
【针对单个区域的餐饮类别】堆叠条形图,y:区域
【单个店铺的运营情况】 柱状图, y值为评论数、颜色随着评论等级变化
【店铺评论词云展示】对评论进行分词然后展示词云
npm install
npm run serve
npm run build
使用vue-cli3.0构建vue项目 添加sass与sass-loader
因各浏览器的默认样式有一些细节上的差别,这里引用reset.css重置默认css,让项目再各浏览器上表现一致。 使用方法: 再src/assets/styles文件夹下存放reset.css 再src/main.js中使用
为了方便前端开发者能够模拟向后台发送数据,在public文件夹下添加 mock文件夹,存放mock数据。然后将所有访问api路径的请求转发到mock文件夹下。 vue-cli 3.+版本,安装完成之后也找不到config、build等目录。查看官方文档,发现已经被简化成使用vue.config.js来配置项目,可以使用了webpack-chain链式API的调用方式,简化了对webpack配置的修改。
为了让前端使用方便,不需要在页面打开时进行一次数据整理过程。鉴于本课题的数据是固定的,所以将数据整理后再发给前台。 在mock文件夹中创建reorganizeData文件夹,他将处理mock文件夹中的原始数据item.json(餐厅数据) 与 useritem.json(用户评论数据) 在mock/reorganizeData 中 handeldata.js 文件将对数据进行第一次整理。
源数据格式:(item.json)
{
"item_id":"10535374",
"name":"廊桥会所",
"star":3.0,
"cost":0.0,
"tast":7.3,
"environment":7.3,
"service":7.3,
"review_count":"2 条点评",
"item_pic":null,
"item_info":"咖啡厅 | 御营坝 滨河南路东段14号",
"item_key_word":null
}
处理后数据:(res) 将所有的评论分类, 对象的键名为餐厅id。 在对象中包括各分值的平均分;在details数组中包含了每一条评论的具体评分与时间;review中为所有评论拼接而成的字符串。因为没有好用的npm分词包,我使用python的jieba库来对评论数据进行处理。
"2067427": { //餐厅id
"avg_rating": 37, //综合评分平均值
"avg_tast": 2.5, //口味评分平均值
"avg_environment": 2.3, //环境评分平均值
"avg_service": 2.5, //服务评分
"review": "团购点评 很实惠 环境也不错 下次还会来的 团购点评 还行!比较适合两个人聊天,比较安静 还行吧,算绵阳比较好的,我确实不怎么喜欢。环境还蛮好,牛排真........",
"details": [
{
"times": "07-23",
"rating": 50,
"tast": 4,
"environment": 4,
"service": 4
},
//................
// 评论细节
]
},
- 在src/compoents/下创建页面所需的组件。 一个组件一个文件夹,文件夹中index.vue向外暴露组件,并且每个文件夹下有README.MD文件, 方便队友写文档
├─Blocks 方块分割图
├─CategoryStack 堆叠条形图
├─CiYun 评价词云
├─ConsumeTend 消费趋势
├─Map 地图
└─RestaurantDetail 餐厅细节