这个是最终版，删掉了之前写的，结合AngularJS ，利用Ajax动态获取json数据，并动态刷新数据生成柱状图和饼图，当你修改json文件时，一旦保存即可立即加载出来，不用刷新整个页面，这也是ajax异步加载的好处。话不多说，直接上代码
html：
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8" />
<title></title>
<link href="css/index.css" rel="stylesheet" />
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl" style="width:90%;height:100%;margin:0 auto;">
<h1 class="title">光圣科技尾牙晚会获奖统计</h1>
<div style="height:80%;background:rgba(255,255,0.6);border-radius:10px;">
<div bar-charts style="width:70%;height:100%;float:left;"></div>
<div pie-charts style="width:30%;height:100%;float:left;"></div>
</div>
</div>
<button id="btn" style="position: absolute;left: 0;top: 0;">click</button>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular.min.js"></script>
<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope) {
})
app.directive('barCharts',function() {
return {
restrict: "ECMA",
template: '<div></div>',
scope: true,
link: function(scope,element) {
var chart = element.find('div')[0];
var parent = element['context'];
chart.style.width = parent.clientWidth + 'px';
chart.style.height = parent.clientHeight + 'px';
var myChart = echarts.init(chart);
var option = {
tooltip: {
trigger: 'axis'
},
title: {
text: "各部门中奖比例"
},
toolBox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line','bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
xAxis: {
data: []
},
yAxis: {
value: {
show: true
},
splitArea: {
show: true
}
},
series: [{
name: '比例',
type: 'bar',
data: [],
itemStyle: {
normal: {
label: {
show: true,//是否展示
textStyle: {
fontWeight: 'bolder',
fontSize: '12',
fontFamily: '微软雅黑',
}
},
color: function(params) {
var colorList = ["rgb(250,230,14)","#11232B","#10CE10","#FE8463","#9Bff63","rgb(250,14)"];
return colorList[params.dataIndex];
}
}
},
}]
};
var flag = true;
var timer = null;
$("#btn").on("click",function() {
if(flag) {
flag = !flag;
timer = setInterval(function() {
$.ajax({
type:"get",
url:"json.json",
async:true,
success:function (data) {
var newxAxis = [];
var newyAxis = [];
for(var i = 0; i < data.length; i++){
newxAxis.push(data[i].name);
newyAxis.push(parseFloat(data[i].value));
};
myChart.setOption({
xAxis:{
data:newxAxis
},
series:{
name:"比例",
data:newyAxis
}
})
},
error:function () {
alert("数据加载失败")
}
});
},300);
} else {
flag = !flag;
clearInterval(timer);
}
})
myChart.setOption(option);
}
}
})
app.directive('pieCharts',function() {
return {
template: '<div>饼图</div>',element) {
var chart = element.find('div')[0];
var parent = element['context'];
chart.style.width = parent.clientWidth + 'px';
chart.style.height = parent.clientHeight + 'px';
var myChart = echarts.init(chart);
var flag = true;
var timer = null;
$("#btn").on("click",
success:function (data) {
var array = [];
for(i = 0 ;i<data.length;i++ ){
var map ={};
map.name = data[i].name;
map.value = data[i].value;
array[i]=map;
}
myChart.setOption({
title: {
text: "各部门中奖比例"
},
readOnly: false
}
}
},
series: [{
type: 'pie',
radius: "50%",
data: array,
formatter: '{b}:{d}%'
},
labelLine: {
show: true
},14)"];
return colorList[params.dataIndex];
}
}
}
}]
})
},
error:function () {
alert("数据加载失败")
}
});
},300);
} else {
flag = !flag;
clearInterval(timer);
}
})
}
}
});
</script>
</body>
</html>
json数据：
[
{"name":"财务科","value":"0.5"},
{"name":"技术科","value":"0.3"},
{"name":"生产科","value":"0.6"},
{"name":"销售科","value":"0.7"},
{"name":"人事科",
{"name":"材料科",
{"name":"研发科","value":"0.4"},
{"name":"啊啊科","value":"0.9"},
{"name":"一一科","value":"0.2"},
{"name":"嘻嘻科",
{"name":"哈哈科",
{"name":"笨蛋科",
{"name":"一库科","value":"0.8"},
{"name":"吼吼科","value":"0.6"}
]
效果图：
原文链接：https://www.f2er.com/angularjs/148381.html