getsData() {
panel02(this.user).then(res => {
let that=this
console.log(res);
that.list = res.list
// console.log(this.list);
if (!that.list || that.list.length == 0) {
that.list = [
{
apot_num: null,
apot_use: null,
total_num: null
},
]
}
let myChart = that.$echarts.init(document.getElementById('bj'));
var colorLine = ['#00fdb8', '#ff8d28', '#ecc321', '#219dec', '#FDB36A', '#FECE43']
function getRich() {
let result = {}
colorLine.forEach((v, i) => {
result[`hr${i}`] = {
backgroundColor: colorLine[i],
borderRadius: 3,
width: 3,
height: 3,
padding: [3, 3, 0, -12],//指向圆点
}
result[`a${i}`] = {
padding: [20, 6, -20, 6],
color: colorLine[i],
backgroundColor: 'transparent',
fontSize: 12,//指向线文字大小
// width: 23,
// height:40,
align: 'center'
}
})
return result
}
var data = []
for (let i = 0; i < that.list.length; i++) {
const dataS =
{
value: that.list[i].apot_num,
name: that.list[i].apot_use
}
data.push(dataS)
}
let sum = 0
for (let i = 0; i < data.length; i++) {
sum += parseInt(data[i].value)
}
// console.log(sum, '008');
let option = {
// backgroundColor: "#011d39",
title: {
text: '100%',
textStyle: {
color: '#fff',
fontSize: 13,
},
x: "28%",
y: "45%",
},
legend: {//图例组件
orient: 'vertical',
top: '25%',
left: '64%',
itemGap: 16,
itemHeight: 12,
itemWidth: 12,
formatter: params => {
// console.log(params,'99');
var aim = data.find(item => item.name == params)
// console.log(data);
// data.reduce(function (prev, cur) {
// return prev + cur.value;
// }, 0);
return `{name|${params}}{number| ${aim.value / sum * 100}}{unit|%}`
},
textStyle: {
lineHeight: 8,
color: '#fff',
rich: {
name: {
fontSize: 12,
fontFamily: 'PingFang-SC-Regular'
},
number: {
fontSize: 12,
fontFamily: 'DS-Digital-Bold',
padding: [0, 0, 0, 0],
},
unit: {
fontSize: 12,
}
}//图例组件字
},
},
series: [{
startAngle: 90, //默认90，起始角度，支持范围[0, 360]
// hoverAnimation: false,
type: 'pie',
radius: ['30%', '45%'],
center: ['35%', '50%'],//扇形圈
clockwise: true,
avoidLabelOverlap: true,
label: {
show: true,
position: 'outside',
formatter: function (params) {
// console.log(params.percent,'99');
const name = params.name
const percent = params.percent.toFixed(0) + '%'
const index = params.dataIndex
// console.log(name.length);
// if(name.length>2){
// name.split('').join('\n')
// }
let displayName = name;
if (name.length > 2) {
displayName = name.substring(0, 3) + '\n' + name.substring(3);
}
return [`{a${index}|${displayName} ${percent}}`, `{hr${index}|}`].join('\n')
},//圈上的数字
rich: getRich()
},
labelLine: {
length: 1,
length2: 1,
lineStyle: {
width: 1,
},
},
itemStyle: {
borderRadius: 10,
color: function (params) {
return {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(0,180,255,.05)' // 0% 处的颜色
},
{
offset: 1,
color: colorLine[params.dataIndex] // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
}
},
data,
},
]
}
// 用定时器让他旋转起来
setInterval(() => {
for (let i = 0; i < option.series.length; i++) {
const element = option.series[i];
element.startAngle = element.startAngle - 2
}
myChart.setOption(option);
}, 100);
// myChart.setOption(option);
})
}
我这么写报错setOption should not be called during main process.使用定时器也不行这是为什么，有什么解决的方法
