1. 首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. ECharts官网

百度echarts南丁格尔玫瑰图自动切换(设置最小值)

2022年05月26日 17:01:20
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')
  	}
  }
}
点击展开全文
百度echarts南丁格尔玫瑰图自动切换(设置最小值)