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

小海海不怕困难

已于 2023-02-23 14:59:32 修改

阅读量4.7w

点赞数

分类专栏：前端文章标签： java

于 2022-06-05 11:22:27 首次发布

本文链接：https://blog.csdn.net/weixin_55229531/article/details/125129945

版权

前端专栏收录该内容

12 篇文章

订阅专栏

机缘

在上次完成大五人格网页端实现后，我想对系统进行更新迭代，让数据展示变得更加具象，因此我想到了使用阿帕奇下面的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(){
            // 拿到id
            let 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(){
            // 拿到id
            let id = localStorage.getItem("id");
            // 查询
            this.findAnimalById(id);
        }

    });



</script>



</body>
</html>