JavaScript大数据图表（饼状）的实现

JavaScript大数据图表（饼状）的实现 HTML

CSS

#mycharts{
	width: 500px;
	height: 500px;
	
}

Javascript

 
//1.获取div元素，初始化为echarets
var myCharts = echarts.init(
document.getElementById("mycharts"))

//2.声明图表
var option = {
	//图表标题
	title:{
		text:"男女比例",
		left:"center"
	},
	//鼠标悬浮时，提示框内容
	tooltip:{
		trigger: 'item',
		formatter: '{a} 
{b} : {c} ({d}%)'
	},
	// 小图表标记样式
	legend:{
		left:"center",
		data:["男生","女生"],
		orient:"horizontal"
	},
	//图表详细内容：形状、数据
	series:[{
		name:"男女比例",
		type:"pie",
		radius:'50%',
		center:['50%','60%'],
		data:[{
			value:49,
			name:"男生"
		},{
			value:2,
			name:"女生"
		}],
		//图表选中时的样式
		emphasis:{
			itemStyle:{
				shadowBlur:10,
				shadowOffsetX:0,
				shadowColor:'rgb(0, 255, 127)'
			}
		}
	}],
};

//3、将声明好的图表，添加至div元素中
myCharts.setOption(option);