var pies
function pieDraw(id, title, name, piesData) {
var myindex = 0
var colorArr = [{
c1: '#0565f4',
c2: '#28e7f9'
}, {
c1: '#0f122f',
c2: '#212757'
}]
var myChart = document.getElementById(id);
var option = {
color: '#2E3571',
title: {
text: title,
textStyle: {
color: 'rgba(255,255,255,.65)',
fontSize: 16,
fontWeight: 100,
fontFamily: 'Gotham-Book'
}
},
series: {
name: name,
type: 'pie',
silent: true,
radius: ['50%', '75%'],
avoidLabelOverlap: false,
minAngle: 5, //最小角度
zlevel: 1,
itemStyle: {
normal: {
borderColor: '#050a20',
borderWidth: 1
},
emphasis: {
show: true,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#0565f4" },
{ offset: 1, color: "#28e7f9" },
]),
}
},
label: {
normal: {
show: true,
position: 'center',
formatter: function(params) {
return ''
},
lineHeight: 20,
color: 'rgba(255,255,255,.65)'
},
emphasis: {
show: true,
formatter: function(params, ticket, callback) {
var name = params.data.name;
var arr = name.split(":");
var percent = params.percent;
var str = percent + '%\n' + arr[0] + '占比';
return str;
},
textStyle: {
lineHeight: 20,
color: '#fff'
}
}
},
labelLine: {
normal: {
show: true
}
},
data: piesData,
}
};
if(pies){
pies.setOption(option);
}else{
pies = echarts.init(myChart);
showLoading(pies)
pies.setOption(option);
pies.hideLoading();
window.addEventListener("resize", function() {
pies.resize();
})
function DrawPieArea(drawdom, piedata, colorArr, curIndex, titleDom) {
if (curIndex == null) {
pies.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
});
if (titleDom) {
titleDom.text = piedata[0].name;
titleDom.style.color = colorArr[0];
}
} else {
pies.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: curIndex
});
if (titleDom) {
titleDom.innerHTML = piedata[curIndex].name;
titleDom.style.color = colorArr[0];
}
setInterval(function() {
var dataLen = piedata.length;
// 取消高亮
pies.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: curIndex
});
curIndex = (curIndex + 1) % dataLen;
//设置高亮
pies.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: curIndex
});
}, 2000);
}
}
var data = piesData
DrawPieArea(myChart, data, colorArr, myindex);
}
}