记录一次echarts的动态雷达图

最新推荐文章于 2024-06-21 10:55:07 发布

从零开始的爪哇生活

最新推荐文章于 2024-06-21 10:55:07 发布

阅读量1.6k

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45690347/article/details/110494833

版权

效果图

在这里插入图片描述

在main.js 引入

import echarts from 'echarts'

相应的模板导入：import echarts from 'echarts';

雷达图样式：<div id="leiDaTu" class="echart" style="width: 550px;height: 450px;"></div>';

前端相关代码实现：
定义三个数组来存储要渲染到雷达图的数据：let indicator = [] let ProjectCat = [] let ProjectCatS = []

formatData(data){
                let indicator = []
                let ProjectCat = []
                let ProjectCatS = []
                data.forEach(info => {
                    let key =  info.fname;
                    let value = info.syst;
                    ProjectCat[key] = value                               
                })         
                let projectValues = Object.values(ProjectCat)       //数组中的得分组成的数组      
                let proMax = Math.max(...projectValues)
                let projectkeys = Object.keys(ProjectCat)   //数组中的项目类型组成的数组
                projectkeys.forEach(key => {
                    data.forEach(item=>{
                        if(item.fname == key){
                            ProjectCatS[key] = item.feffe
                        }
                    })  
                })
                
                let ProjectValues = Object.values(ProjectCatS) 
                let ProjectMax = Math.max(...ProjectValues)
                let max = proMax > ProjectMax ? proMax : ProjectMax
                projectkeys.forEach(item => indicator.push({
                    'name':item,
                    'max':max
                }))
                let result = {
                    indicator : indicator,
                    ProjectCat : projectValues,
                    ProjectCatS : ProjectValues
                }
                return result
            },

 eachartCategory(data){
                let eachartCategoryChart = echarts.init(document.getElementById('leiDaTu'))
               
                let option = {
                      title: {
                            text: '制度健全性得分现状与遵循有效性得分现状得分雷达图',
                            textStyle: {
                                color: 'rgba(65	105	225)', //标题颜色
                                fontSize: 14,
                                lineHeight: 20,
                            },
                           
                        },
                       tooltip: {
                        trigger: 'item',
                        position:function(p){    //其中p为当前鼠标的位置
                            return [p[0], p[1]];
                        },
                    },
                    legend: {
                        orient: 'vertical',
                        right: '6%',
                        textStyle: {
                            color:'#1C86EE',
                            fontWeight: 'bold'
                        },
                        data: ['制度健全性得分现状', '遵循有效性得分现状']
                    },
                    radar: {
                        splitNumber: 6, // 雷达图圈数设置
                        center: ['50%','50%'],
                        radius : '75%',
                        name: {
                            textStyle: {
                                color: '#DFE0E5',
                                backgroundColor: '#121E36'
                            }
                        },
                        indicator: data.indicator,
                        splitArea : {
                            show : false,
                            areaStyle : {
                               color: 'rgba(255,0,0,0)', // 图表背景的颜色
                            },
                        },
                    },
                    series: [{
                        name: '制度健全性得分现状 vs 遵循有效性得分现状',
                        type: 'radar',
                        data : [
                            {
                                value : data.ProjectCat,
                                name : '制度健全性得分现状',
                                itemStyle: {
                                    normal: {
                                        color:'#A020F0'  //显示颜色与填充颜色对应
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: '#A020F0'    //填充的颜色
                                    }
                                }
                            },
                            {
                                value : data.ProjectCatS,
                                name : '遵循有效性得分现状',
                                itemStyle: {
                                    normal: {
                                        color:'#EE2C2C'
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: '#EE2C2C'
                                    }
                                }
                            }
                        ]
                    }]
                };
                eachartCategoryChart.clear()
                eachartCategoryChart.setOption(option)
            },

eachartCategoryChart.clear() 方法在每次重新渲染数据的时候，把之前渲染的雷达图清除。
eachartCategoryChart.setOption(option)雷达图显示

 getList() {
      this.loading = true;
      selectScoe(this.queryParams).then(response => {
        this.projectList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.eachartCategory(this.formatData(this.projectList))
      });
    },

把从后台获取的数据渲染到雷达图this.eachartCategory(this.formatData(this.projectList))

数据的加载：mounted(){ this.getList() },