这是学习ECharts的练手之作，中文学习网址：http://echarts.baidu.com/index.html
实现效果图如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.js"></script>
<script src="js/jquery-3.0.0.min.js"></script>
</head>
<style type="text/css">
html,body{
margin:0;
padding: 0;
}
.chartContainer{
width:100%;
height:13rem;
border:1px solid pink;
box-sizing:border-box;
}
</style>
<body>
<div class="chartContainer" id="chart1">
</div>
</body>
<script type="text/javascript">
//初始化echarts实例
var chart1=$("#chart1").get(0);
var myChart=echarts.init(chart1);
//对echarts做基础配置
myChart.setOption({
//背景色是全局的，所以直接在 option 下设置 backgroundColor,一开始放在series里面没有效果
backgroundColor:'#2c343c',
visualMap:{
show:false, // 不显示 visualMap 组件，只用于明暗度的映射
min:80,// 映射的最小值为 80
max:600,// 映射的最大值为 600
inRange:{
colorLightness:[0,1] // 明暗度的范围是 0 到 1
}
},
series:[{
name:"访问来源",
type:"pie",
radius:"55%",
roseType: 'angle',//此字段表示南丁格尔图（通过半径表示数据大小）
itemStyle:{
normal:{//正常情况下的样式
shadowBlur:200,//阴影的大小
shadowOffsetx:0,//阴影水平方向上的偏移
shadowOffsetY:0,//阴影垂直方向上的偏移
shadowColor:"rgba(0,0,0,0.5)",
color:"pink" //设置扇叶整体颜色
},
emphasis:{//鼠标hover的高亮时候的样式
shadowBlur:400,
shadowColor:"rgba(0,0,0,1)"
}
},
label:{
normal:{
textStyle:{
color:"rgba(255,255,255,0.3)",
fontSize:"12"
}
}
},
labelLine:{//跟itemStyle一样，label和labelLine的样式也有normal和emphasis两个状态。
normal:{
lineStyle:{
color:"rgba(255,255,255,0.3)"
}
}
},
data:[
{
value:400,
name:"搜索引擎",
/*itemStyle:{
normal:{
color:"red"
}
}*/
},
{
value:340,
name:"直接访问",
/*itemStyle:{
normal:{
color:"blue"
}
}*/
},
{
value:310,
name:"邮件营销",
/*itemStyle:{
normal:{
color:"green"
}
}*/
},
{
value:140,
name:"联盟广告",
/*itemStyle:{
normal:{
color:"pink"
}
}*/
},
{
value:230,
name:"视频广告",
/*itemStyle:{
normal:{
color:"yellow"
}
}*/
},
]
}]
});
</script>
</html>