1. 摘要
最近做项目遇到个统计相关需求，一个页面中大概四个或更多图形统计，百度地图、饼图、柱状图、线型图。百度地图上显示所有店面在全国各地大概位置，目前暂定每省一个，在地图上显示散点。如默认显示郑州散点闪动，其他图形显示郑州相关数据；5秒切换下一个区域点，其他的图表数据对应改变。先上个图，各位有需要的可以再接着往下
2. 引入ECharts以及地图相关json
ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。
5. 定时循环jquery实现
地图上的散点闪动5秒切换一次，所有地图信息参与轮询。具体js代码如下：
if (!deptname) {
deptname = data[globalIndex].name;
globalIndex++;
if (globalIndex == data.length) {
globalIndex = 0;
}
}
//alert(name);
$.ashx("ajax的URL地址","action=xx&deptname=" + deptname,function (result) {
if (result) {
if (result.results == "") {
return;
}
//debugger;
//alert(result.results.politcal);
var option = myChart.getOption();
//动态改变图形
option.series[0].data = convertData(data);//地图
option.series[0].symbolSize = function (val,params) {//标记的大小
//alert(name.name);
if (deptname == params.name) {
return 35;//地图闪动
} else {
return 20;
}
};
option.series[0].itemStyle.color = function (params) {
if (deptname == params.name) {
return "rgba(245,214,1)";
} else {
return "#F4E925";
}
};
option.series[1].data = result.results[0].politcal;//政治面貌
option.series[2].data = result.results[1].ageScale;//年龄占比
option.series[3].itemStyle.color = function (params) {
if (deptname == params.name) {
return "rgba(245,1)";
} else {
var colorList = ['#c23531','#c4ccd3'];
return colorList[params.dataIndex];
}
}
option.series[4].data = [2,7,12,6,3];//请假
option.series[5].data = [11,5,21,10,8,5];//迟到
option.series[6].data = [6,11,13];//早退
option.series[7].data = [7,22,9];//调休
option.series[8].data = [20,23,7];//加班
option.series[9].data = [33,24,9,1];//旷工
myChart.setOption(option);
}
},function (er) {
//alert("请求失败");
});
}
$(function () {
//定时循环
var interval = setInterval("redoMethod()",5000);//每隔一秒执行一次redoMethod()
//假如有两个按钮：继续、暂停
$("#btnSet").click(function () {//点击暂停按钮
if (interval) {
clearInterval(interval);
interval = null;
}
if ($(this).attr("title") == "点击停止") {
$(this).attr("title","点击开始");
$(this).attr("class","btnPlay");
} else {
$(this).attr("title","点击停止");
$(this).attr("class","btnPause");
interval = setInterval("redoMethod()",5000);
}
});
});
6. 总结
以上就是我在处理同页面多图形统计且有级联关系处理时的思路及采坑代码，文中代码均是从项目中复制出来的，完整率99.99%，代码略乱，开发中整理的思路注释什么的未处理，见谅。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
原文链接：https://www.f2er.com/js/31169.html