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

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

一、给个容器

二、获取数据

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){

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值