//图标写在方法里面（然后在mounted里展示）
getEcharts(){
var myChart = document.getElementById(‘echarts’);
let echarts = echarts.init(myChart);
var option;
var legends = this.getlowIncomeData_xData; //图例名字（在这里作修改）
// var colors = [‘#138FEF’, ‘#FE79EA’, ‘#27EFA0’, ‘#EEEE80’, ‘#611EA8’]; //可以在这里写全部颜色，也可以在series下面具体到每条数据里写颜色，方法很多种
var data = this.getlowIncomeData //饼图数据（在这里作修改）
option = {
title: {
text: this.getlowIncomeDataNumber_name,//饼图的标题
top: ‘4%’, //标题上边距
left: 10, //标题左边距
textStyle: {
color: ‘#23F0FD’, //标题颜色
fontSize: 24,// 标题字体大小
}
},
// color: colors,
legend: { //图例的属性
orient: ‘vertical’, //图例垂直显示，默认为水平布局“horizontal”
top: “center”, //图例顶部居中
right: “5%”, //图例靠右边距离
itemGap: 50, //每个图例之间的间距
itemWidth: 21, //每个图例的宽度
itemHeight: 16, //每个图例的高度
textStyle: {
color: “#fff”, //图例文字的颜色
fontSize: 22 //图例字体的大小
},
data: legends, //图例显示的名字list数据
},
tooltip: {
trigger: ‘item’, //提示框
formatter: ‘{b} ({d}%)’, //提示框显示顺序
},
series: [{
name: ‘’,
type: ‘pie’, //图标类型是饼图
minAngle: 15, //最小的扇区角度，用于防止某个值过小导致扇区太小影响交互
radius: [‘10%’, ‘60%’], //图标的半径大小
center: [‘44%’, ‘50%’], //图标居中显示的大小
roseType: ‘radius’, //区域突出显示
label: {
show: true, //标签显示
normal: {
position: ‘outside’, //标签向外显示，可选inside（向内）
textStyle: {
// color: ‘#fff’, // 改变标示文字的颜色
fontSize: 22,
},
formatter: (params) => {
return params.name + params.value + ‘人’;
}
}
},
// data: data
data: [{
name: data[0].name,
value: data[0].value,
label: {
color: ‘#138FEF’, //标签字体颜色
},
itemStyle: {
normal: {
color: " #138FEF" //标签区域颜色
}
}
}, {
name: data[1].name,
value: data[1].value,
label: {
color: ‘#FE79EA’
},
itemStyle: {
normal: {
color: " #FE79EA"
}
}
}, {
name: data[2].name,
value: data[2].value,
label: {
color: ‘#27EFA0’
},
itemStyle: {
normal: {
color: " #27EFA0"
}
}
}, {
name: data[3].name,
value: data[3].value,
label: {
color: ‘#EEEE80’
},
itemStyle: {
normal: {
color: " #EEEE80"
}
}
}, {
name: data[4].name,
value: data[4].value,
label: {
color: ‘#611EA8’
},
itemStyle: {
normal: {
color: " #611EA8"
}
}
}]
}]
}
option && echarts.setOption(option)
}