<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main" style="height:400px;"></div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/echarts.js"></script>
<script type="text/javascript">
/*饼图 鼠标经过时模块放大功能 */
// 路径配置
require.config({
paths: {
echarts: 'js/'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
setInterval(function(){
$.get("js.json",function(data){
var param = {legen:[],data:[]};
for(var i = 0 ;i<data.length;i++){
param["legen"].push(data[i]["name"]);
var obj = {};
obj.value = data[i]["age"];
obj.name = data[i]["name"];
param["data"].push(obj);
}
var option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'left'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: param["legen"]
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:param["data"],
selectedMode:"multiple",//点击之后 扇形分离
legendHoverLink:true,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
},"json");
},1000);
}
);
</script>
</body>
</html>
