vue echarts 雷达图（radar）动态获取数据并渲染

一、给个容器

 

二、获取数据

mounted(){
            this._getCategory()
        },

_getCategory(){
            getCategory().then(res=>{
                 let data = res.data.data
                 this.bookCategory(this.formatData(data))
              })
          },
            formatData(data){
                let indicator = []
                let bookCat = []
                let borrowCat = []
                data.book.forEach(info => {
                    let key =  info.category;
                    let value = info.number;
                    bookCat[key] = value                 
                })
                let bookValues = Object.values(bookCat)       //book中的number组成的数组      
                let bookMax = Math.max(...bookValues)
                let bookKeys = Object.keys(bookCat)   //book数组中的category组成的数组
                bookKeys.forEach(key => {
                    data.borrow.forEach(item=>{
                        if(item.category == key){
                            borrowCat[key] = item.number
                        }
                    })  
                })
                
                let borrowValues = Object.values(borrowCat) 
                let borrowMax = Math.max(...borrowValues)
                let max = bookMax > borrowMax ? bookMax : borrowMax
                bookKeys.forEach(item => indicator.push({
                    'name':item,
                    'max':max
                }))
                let result = {
                    indicator : indicator,
                    bookCat : bookValues,
                    borrowCat : borrowValues
                }
                return result
            },
            bookCategory(data){
                let bookCategoryChart = echarts.init(document.getElementById('book-category'))
                let option = {
                    tooltip: {
                        trigger: 'item',
                        position:function(p){    //其中p为当前鼠标的位置
                            return [p[0], p[1]];
                        },
                    },
                    legend: {
                        orient: 'vertical',
                        right: '5%',
                        textStyle: {
                            color:'#DFE0E5',
                            fontWeight: 'bold'
                        },
                        data: ['书刊类别分布', '借阅类别分布']
                    },
                    radar: {
                        splitNumber: 2, // 雷达图圈数设置
                        center: ['50%','50%'],
                        radius : '65%',
                        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.bookCat,
                                name : '书刊类别分布',
                                itemStyle: {
                                    normal: {
                                        color:'#F75325'  //显示颜色与填充颜色对应
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: '#F75325'    //填充的颜色
                                    }
                                }
                            },
                            {
                                value : data.borrowCat,
                                name : '借阅类别分布',
                                itemStyle: {
                                    normal: {
                                        color:'#7B52CC'
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: '#7B52CC'
                                    }
                                }
                            }
                        ]
                    }]
                };
                bookCategoryChart.setOption(option)
            }

 

 五、效果如下：