AngularJS+Echarts利用Ajax实现数据动态刷新

最新推荐文章于 2022-06-04 21:47:49 发布

JustForZR

最新推荐文章于 2022-06-04 21:47:49 发布

阅读量6k

点赞数 1

分类专栏：前端开发 html 文章标签： angularjs echarts ajax 动态刷新数据

本文链接：https://blog.csdn.net/JustForZR/article/details/53815555

版权

前端开发同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

这个是最终版，删掉了之前写的，结合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,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", "#11232B", "rgb(250,230,14)", "#10CE10", "#FE8463", "#9Bff63", "#11232B", "rgb(250,230,14)", "#10CE10", "#FE8463", "#9Bff63", "#11232B", "rgb(250,230,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>',
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 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 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: "各部门中奖比例"
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
}
}
},
series: [{
type: 'pie',
radius: "50%",
data: array,
itemStyle: {
normal: {
label: {
show: true,
formatter: '{b}:{d}%'
},
labelLine: {
show: true
},
color: function(params) {
var colorList = ["rgb(250,230,14)", "#11232B", "#10CE10", "#FE8463", "#9Bff63", "#11232B", "rgb(250,230,14)", "#10CE10", "#FE8463", "#9Bff63", "#11232B", "rgb(250,230,14)", "#10CE10", "#FE8463", "#9Bff63", "#11232B", "rgb(250,230,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":"人事科","value":"0.3"},
{"name":"材料科","value":"0.5"},
{"name":"研发科","value":"0.4"},
{"name":"啊啊科","value":"0.9"},
{"name":"一一科","value":"0.2"},
{"name":"嘻嘻科","value":"0.5"},
{"name":"哈哈科","value":"0.7"},
{"name":"笨蛋科","value":"0.5"},
{"name":"一库科","value":"0.8"},
{"name":"吼吼科","value":"0.6"}
]

效果图：