function pieRoseType(id, title, piesData, color) {
var num = 3;
var myindex = 0;
var maxData = piesData.sort(function(a, b) {
return b.value - a.value
})[0].value / 2;
var totalNum = piesData.reduce((num, item) => {
return num + item.value;
}, 0);
piesData = piesData.map(item => {
item.percent = item.value ? (item.value * 100 / totalNum).toFixed(2) + '%' : '0%';
item.orgnum = item.value;
item.value = item.value ? item.value + maxData : item.value;
return item;
})
for (var i = 1; i < num; i++) {
var myChart = document.getElementById(id);
var option = {
color: color,
title: {
text: title,
textStyle: {
color: 'rgba(255,255,255,.65)',
fontSize: 16,
fontWeight: 100,
fontFamily: 'Gotham-Book'
}
},
series: {
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '50%'],
roseType: 'radius',
avoidLabelOverlap: false,
zlevel: 1,
label: {
normal: {
show: false,
position: 'center',
fontSize: 16,
lineHeight: 18,
color: '#fff',
fontFamily: 'Gotham-Book'
},
emphasis: {
show: true,
formatter: function(param){
return param.data.percent + '
' + param.data.name;
},
extraCssText:'width:120px; white-space:pre-wrap',
textStyle: {
rich: {
B: {
fontSize: 15,
color: '#fff',
lineHeight: 20
},
S: {
fontSize: 12,
},
L: {
fontSize: 20,
}
},
fontFamily: 'Gotham-Book'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: piesData
}
};
function drawPie(pieData) {
pieData = echarts.init(myChart);
pieData.setOption(option);
window.addEventListener("resize", function() {
pieData.resize();
})
function DrawPieArea(drawdom, piedata, color, curIndex, titleDom) {
console.log('piedata',piedata)
if (curIndex == null) {
pieData.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
});
if (titleDom) {
titleDom.text = piedata[0].name;
titleDom.style.color = color[0];
}
} else {
pieData.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: curIndex
});
if (titleDom) {
titleDom.innerHTML = piedata[curIndex].name;
titleDom.style.color = color[curIndex];
}
setInterval(function() {
var dataLen = piedata.length;
// 取消高亮
pieData.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: curIndex
});
curIndex = (curIndex + 1) % dataLen;
if (titleDom) {
titleDom.innerHTML = piedata[curIndex].name;
titleDom.style.color = color[curIndex];
}
//设置高亮
pieData.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: curIndex
});
}, 2000);
}
}
var data = piesData
DrawPieArea(myChart, data, color, myindex);
}
if (i == 1) {
drawPie('pieData1')
} else {
drawPie('pieData2')
}
}
}