Echarts圆饼图从后台获取数据动态填充
先来看一下我的页面展示结果，这里用的是官网上那个最简单的例子
贴一下前端代码
getData () {
var url = this.HOST + '/recruit/getRecruitmentAnalyse'
this.$http.post(url).then(resp => {
var data = resp.data
var tatilData = []
for (var i = 0; i < data.data.length; i++) {
console.log(data.data)
tatilData.push(data.data[i].name)
}
let myChart = echarts.init(this.$refs.myEchart)
// this.getDataList()
myChart.setOption({
title: {
text: '各专业招聘信息分析图',
subtext: '就业信息管理中心库',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
x: 'left',
data: tatilData
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: data.data
}
]
})
}).catch(() => {
alert('网络错误，查看招聘分析报告')
})
}
这个就是前端的代码，去后台拉取数据，注意这个拉取数据是异步的，所以把赋值部分直接写在then的里头，不然会造成图表先填充后又拉取数据
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！