javascript vue.js vue后台返回的数据渲染到echarts饼图上

1.安装echarts

npm install echarts --save

2.在组件内引入echarts

import * as echarts from 'echarts' 

3.准备好装图表的容器

4.初始化图表 并获取后台数据渲染到饼图上

后台返回的数据格式：

展示到饼图上的data需要的格式是data[{name:'A',value:1}] ,后台返回的数据里没有name和value,需要处理一下后台数据(注意：在后台数据中如：applyUserDept字段可能在不同的对象中)

// 从后台返回的数据中(返回的数据格式[{...},{...}] ) 分离出图表展示需要的name字段

let applyName = this.list.map(item=>{

return item.applyUserDept

})

// 如果分离出来的字段存在重复的，需要计算重复字段出现的次数 ['A','B','C','A']

let getData = applyName.reduce((obj, name) => {

if (name in obj) {

obj[name]++

} else {

obj[name]=1

}

return obj //{'A':2,'B':1,'C':1}

}, {})

//存放形式为[{name1:value},{name2:value2}]

let dataList = [];

//计算完数组中每个元素出现的次数,得到一个对象 属性->name 属性值->value

for(const key in getData) {

let obj1 = {name:key,value:getData[key]}

dataList.push(obj1)

}

// 饼图中使用处理好的数据

this.applyChart.setOption({

series:[{

// 饼图的数据源

data: dataList,

}]

});

 处理好的数据：

最后尽管后台并没有返回带有name和value字段的数据，通过处理也成功的把需要展示的数据，渲染到饼图上 最后效果图：

好文链接

 您阅读本篇文章共花了：