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的里头，不然会造成图表先填充后又拉取数据