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

百度echarts饼图默认单色跳动变色

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);
  }
}
点击展开全文

Echarts入门