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);