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

最新推荐文章于 2025-06-13 10:24:11 发布

weixin_39865440

最新推荐文章于 2025-06-13 10:24:11 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： vue 雷达扫描

本文链接：https://blog.csdn.net/weixin_39865440/article/details/111548889

本文介绍了如何在Vue应用中使用Echarts创建雷达图，并动态获取数据进行渲染。首先设置容器，然后获取数据并进行处理，通过formatData函数整理书刊类别和借阅类别的数据。接着初始化Echarts图表，设置雷达图的配置项，包括提示、图例、雷达指标等。最后展示动态渲染的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、给个容器

二、获取数据

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)

}

五、效果如下：