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') } } }