ECharts+springboot实现大五人格心理测评数据雷达图展示

机缘

在上次完成大五人格网页端实现后，我想对系统进行更新迭代，让数据展示变得更加具象，因此我想到了使用阿帕奇下面的ECharts来实现我的需求。ECharts功能十分强大，可以提供各种绘图接口。

效果图

雷达图界面：

总控界面：

实现步骤

1、引入依赖

<script src="../js/vue.js"></script><script src="../js/axios.js"></script><script src="/js/element-ui/lib/index.js"></script><script src="../js/echarts.js"></script>

2、添加作用域

<div id="app" style="width: 600px;height:400px;">

3、撰写vue，定义数据结构

 let app=new Vue({el:"#app",data: {//这是ECharts所需的数据结构option: {title: {text: ''},tooltip: {trigger: 'axis'},legend: {left: 'center',data: ['personality standard','personality interviewee','animal interviewee']},radar: [{indicator: [{ text: 'tiger', max: 30 },{ text: 'peacock', max: 30 },{ text: 'koala', max: 30 },{ text: 'owl', max: 30 },{ text: 'chameleon', max: 30 }],center: ['25%', '40%'],radius: 80},{indicator: [{ text: 'extraversion', max: 20 },{ text: 'agreeableness', max: 20 },{ text: 'seriousness', max: 20 },{ text: 'neuroticism', max: 20 },{ text: 'experienceopenness', max: 20 }],center: ['75%', '40%'],radius: 80},],series: [{type: 'radar',tooltip: {trigger: 'item'},data: [{value: [0, 0, 0, 0,0],name: 'animal interviewee'}]},{type: 'radar',radarIndex: 1,tooltip: {trigger: 'item'},data: [{value: [13, 16, 13.5, 10,15],name: 'personality standard'},{value: [0, 0, 0, 0,0],name: 'personality interviewee'}]}]},
//这是接收后端数据需要的数据结构animal: {tiger: 0,peacock: 0,koala: 0,owl: 0,chameleon: 0,personalityHandled: {extraversion: 0,agreeableness: 0,seriousness: 0,neuroticism: 0,experienceopenness: 0,}},},}

4、在vue内添加请求方法，并在请求成功后把数据出具处理并放入ECharts中

  let app=new Vue({el:"#app",data: {option: {title: {text: ''},tooltip: {trigger: 'axis'},legend: {left: 'center',data: ['personality standard','personality interviewee','animal interviewee']},radar: [{indicator: [{ text: 'tiger', max: 30 },{ text: 'peacock', max: 30 },{ text: 'koala', max: 30 },{ text: 'owl', max: 30 },{ text: 'chameleon', max: 30 }],center: ['25%', '40%'],radius: 80},{indicator: [{ text: 'extraversion', max: 20 },{ text: 'agreeableness', max: 20 },{ text: 'seriousness', max: 20 },{ text: 'neuroticism', max: 20 },{ text: 'experienceopenness', max: 20 }],center: ['75%', '40%'],radius: 80},],series: [{type: 'radar',tooltip: {trigger: 'item'},data: [{value: [0, 0, 0, 0,0],name: 'animal interviewee'}]},{type: 'radar',radarIndex: 1,tooltip: {trigger: 'item'},data: [{value: [13, 16, 13.5, 10,15],name: 'personality standard'},{value: [0, 0, 0, 0,0],name: 'personality interviewee'}]}]},animal: {tiger: 0,peacock: 0,koala: 0,owl: 0,chameleon: 0,personalityHandled: {extraversion: 0,agreeableness: 0,seriousness: 0,neuroticism: 0,experienceopenness: 0,}},},methods:{findAnimalById(id){axios.get("http://localhost:8080/container/id/"+id).then(resp =>{if(resp.data.code===20041){this.animal= resp.data.data;this.$message({showClose: true,message: '查询成功',type: 'success'});// 设置数据this.option.series[0].data[0].value[0]=this.$data.animal.tiger;this.option.series[0].data[0].value[1]=this.$data.animal.peacock;this.option.series[0].data[0].value[2]=this.$data.animal.koala;this.option.series[0].data[0].value[3]=this.$data.animal.owl;this.option.series[0].data[0].value[4]=this.$data.animal.chameleon;this.option.series[1].data[1].value[0]=this.$data.animal.personalityHandled.extraversion;this.option.series[1].data[1].value[1]=this.$data.animal.personalityHandled.agreeableness;this.option.series[1].data[1].value[2]=this.$data.animal.personalityHandled.seriousness;this.option.series[1].data[1].value[3]=this.$data.animal.personalityHandled.neuroticism;this.option.series[1].data[1].value[4]=this.$data.animal.personalityHandled.experienceopenness;var myChart = echarts.init(document.getElementById('app'));myChart.setOption(app.option);}else {console.log(resp.data);this.$message({showClose: true,message: '查询失败',type: 'error'});}})},},created(){// 拿到idlet id = localStorage.getItem("id");// 查询this.findAnimalById(id);}});

收获

1、深刻了解了同步和异步的区别，这在我的的博客《ECharts+springboot项目，前端不显示数据，找错误，找了一下午》中深有体会。

2、框架看懂和会使用还差着十万八千里。

展望

1、我想为这个系统添加简历分析功能，如果有更新迭代了，我将会继续更新系统。

2、我还想在系统增加更多的心理学分析功能，例如职业生涯规划，智商测试等。

全部代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../js/vue.js"></script><script src="../js/axios.js"></script><script src="/js/element-ui/lib/index.js"></script><script src="../js/echarts.js"></script></head>
<body>
<div id="app" style="width: 600px;height:400px;"></div><script type="text/javascript">let app=new Vue({el:"#app",data: {option: {title: {text: ''},tooltip: {trigger: 'axis'},legend: {left: 'center',data: ['personality standard','personality interviewee','animal interviewee']},radar: [{indicator: [{ text: 'tiger', max: 30 },{ text: 'peacock', max: 30 },{ text: 'koala', max: 30 },{ text: 'owl', max: 30 },{ text: 'chameleon', max: 30 }],center: ['25%', '40%'],radius: 80},{indicator: [{ text: 'extraversion', max: 20 },{ text: 'agreeableness', max: 20 },{ text: 'seriousness', max: 20 },{ text: 'neuroticism', max: 20 },{ text: 'experienceopenness', max: 20 }],center: ['75%', '40%'],radius: 80},],series: [{type: 'radar',tooltip: {trigger: 'item'},data: [{value: [0, 0, 0, 0,0],name: 'animal interviewee'}]},{type: 'radar',radarIndex: 1,tooltip: {trigger: 'item'},data: [{value: [13, 16, 13.5, 10,15],name: 'personality standard'},{value: [0, 0, 0, 0,0],name: 'personality interviewee'}]}]},animal: {tiger: 0,peacock: 0,koala: 0,owl: 0,chameleon: 0,personalityHandled: {extraversion: 0,agreeableness: 0,seriousness: 0,neuroticism: 0,experienceopenness: 0,}},},methods:{findAnimalById(id){axios.get("http://localhost:8080/container/id/"+id).then(resp =>{if(resp.data.code===20041){this.animal= resp.data.data;this.$message({showClose: true,message: '查询成功',type: 'success'});// 设置数据this.option.series[0].data[0].value[0]=this.$data.animal.tiger;this.option.series[0].data[0].value[1]=this.$data.animal.peacock;this.option.series[0].data[0].value[2]=this.$data.animal.koala;this.option.series[0].data[0].value[3]=this.$data.animal.owl;this.option.series[0].data[0].value[4]=this.$data.animal.chameleon;this.option.series[1].data[1].value[0]=this.$data.animal.personalityHandled.extraversion;this.option.series[1].data[1].value[1]=this.$data.animal.personalityHandled.agreeableness;this.option.series[1].data[1].value[2]=this.$data.animal.personalityHandled.seriousness;this.option.series[1].data[1].value[3]=this.$data.animal.personalityHandled.neuroticism;this.option.series[1].data[1].value[4]=this.$data.animal.personalityHandled.experienceopenness;var myChart = echarts.init(document.getElementById('app'));myChart.setOption(app.option);}else {console.log(resp.data);this.$message({showClose: true,message: '查询失败',type: 'error'});}})},},created(){// 拿到idlet id = localStorage.getItem("id");// 查询this.findAnimalById(id);}});</script></body>
</html>

ECharts+springboot实现大五人格心理测评数据雷达图展示相关推荐

（转）大五人格、MBTI、DISC这些测评工具都有什么区别啊
https://www.zhihu.com/question/396318667 作者:Howard 链接:https://www.zhihu.com/question/396318667/answe ...
（大五人格分析）开放型人格的优势和职业发展
大五人格,也叫大五类人格,也被写为:Big five.OCEAN.NEO-PI-R,人格指的是为人处世的行为和思维方式,是能力.气质.动机和价值观的整合,具有稳定性和独特性. 大五人格简版分为五个大 ...
MBTI职业性格测试和大五人格测试对比分析
mbti和大五人格的对比分析要说出风头,那是mbti占尽了优势,但要说严肃严谨,那还得说大五.要说准确性,这个不太好对比,毕竟这是两种不同的人格测试类型,理论基础不同应用方向也不同. mbti属于人 ...
计算机人格测试题,计算机自适应测验环境下考生能力水平和大五人格对试题作答行为的影响...
摘要: 科学测评学生学业成就和能力水平对于改进学校教育质量,公平评价学生,促进学生发展具有重要意义.<国家中长期教育改革和发展规划纲要(2010-2020年)>指出:"尊重教育规 ...
十二个“一”的大五人格分析
十二个"一"的大五人格分析一. 研究背景上学期我们就十二个"一"进行了大量研究,其中有一项非常重要的数据,即对于十二个"一"的大五人格※ ...
大五人格OCEAN模型理论
「人格模型论」:一个解释人格理论的理论&自己的人格理论观 - 知乎教育心理学复习资料:人格类型理论|163_手机网易网百度百科-验证大五人格的五个维度大五模式海洋,包括五个维度:①开放 ...
基于JAVA+SpringBoot+Mybatis+MYSQL的在线心理测评管理系统
项目功能: 系统分为用户和管理员两种角色,用户可以在前台浏览文章,提交心理测评,查看留言列表,提交留言,查看公告列表,后台管理员功能:文章管理.留言管理.用户管管理.心理测评管理.公告管理.系统设置等 ...
echarts 自适应屏幕主题颜色自动缩放选框多图展示自定义toolTip
图自适应屏幕 /*** 自适应*/ window.addEventListener("resize",function () {myChart.resize(option) }) ...
SpringBoot获取大疆无人机的飞行数据
一.项目前提随着无人机技术的发展,细分市场领域的需求增长,无人机的应用正展现出越来越丰富的可能性.航拍.农业.植保.自拍.快递运输.灾难救援.观察野生动物.监控传染病.测绘.新闻报道.电力巡检.救灾 ...