Echart饼图官方数据样式为下：
获取接口里的数组之后，把name和value组合成Echars需要的数组样式，然后进渲染即可
mounted() {
var myChart = echarts.init(this.$refs.main);
this.list=JSON.parse(JSON.stringify(this.str))
/* 只显示一个图例 */
this.list.series.splice(1)
/* 改变图类型饼图 */
/* this.list.series.forEach(r=>{
r.type='pie'
}) */
this.list.series[0].type='pie'
-----------------------------------------------------
关键点改变data数据结构，改成Echart官方数据结构
如图上所示：
/* 获取list里面的名字 name */
let listname=this.list.xAxis[0].data
/* 获取list里面的值 value */
let listvalue=this.list.series[0].data
/* 新建一个数组 */
let newarr=[]
listname.forEach((r,i)=>{
/* 创建一个对象，里面添加值 */
let obj={
name:r,
value:listvalue[i]
}
/* push进数组 */
newarr.push(obj)
})
/* 把data中的数据覆盖 */
this.list.series[0].data=newarr
------------------------------------------------------
/*设置饼图的圆心的大小和圆的大小*/
this.list.series[0].radius=['10%','50%']
/*设置圆的上下左右的距离*/
this.list.series[0].center=['50%','60%']
/* 把圆的形状设置成玫瑰形*/
/* this.list.series[0].roseType='area' */
/* /*给圆设置圆角*/
this.list.series[0].itemStyle={
borderRadius:5
}
this.list.title={
text:'',
}
/* 摸上去显示信息 */
this.list.tooltip={
/* a表示系列名 <br/>表示换行 b表示数据名 c表示数据值 d表示所占的百分比 */
formatter: '{a} <br/>{b} : {c} ({d}%)'
}
/* this.list.legend.top='10%'
this.list.legend.left='0%' */
this.list.legend={
top:'10%',
left:0
}
/* 隐藏X轴 */
this.list.xAxis={
show:false
}
/* 隐藏Y轴 */
this.list.yAxis={
show:false
}
myChart.setOption(this.list)
window.LineChart=myChart
},
效果图如下：
