<script> /** 地图级联 */ var mapContainer = document.getElementById('mapContainer'); //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽 var resizeWorldMapContainer = function () { $("#mapContainer").width($(window).width()); $("#mapContainer").height($(window).height()); //$("#mapContainer").css("width", $(window).width()+"px"); //$("#mapContainer").css("height", $(window).height()+"px"); }; // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(mapContainer); var geoCoordMap = { '河南省': [113.664496, 34.817821], '河南': [113.75783, 34.502434], '北京市': [116.403694, 39.915378], '天津市': [117.216837, 39.142415], '上海市': [121.479662, 31.234329], '河北省': [114.494585, 38.129532], '山西省': [112.569095, 37.908919], '辽宁省': [123.445046, 41.806913], '吉林省': [126.582519, 43.86473], '新疆': [87.559985, 43.879367], '西藏': [91.160816, 29.653148], '内蒙古': [111.771822, 40.93481], '四川省': [106.492302, 29.601285], '青海省': [101.73138, 36.627027], '广东省': [113.254301, 23.129454], '湖南省': [112.953187, 28.265007] }; var data = [{ name: '河南省', value: 3 }, { name: '河南', value: 1 }, { name: '北京市', value: 1 }, { name: '天津市', value: 1 }, { name: '上海市', value: 2 }, { name: '河北省', value: 1 }, { name: '山西省', value: 1 }, { name: '辽宁省', value: 0 }, { name: '吉林省', value: 1 }, { name: '新疆', value: 0 }, { name: '西藏', value: 1 }, { name: '内蒙古', value: 0 }, { name: '四川省', value: 0 }, { name: '青海省', value: 0 }, { name: '广东省', value: 0 }, { name: '湖南省', value: 0 }]; var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }; var uploadedDataURL = "../scripts/echart/china.json"; myChart.showLoading(); $.getJSON(uploadedDataURL, function (geoJson) { echarts.registerMap('zhengzhou', geoJson); myChart.hideLoading(); option = { backgroundColor: '#020933', title: { top: 20, left: 190, text: '大屏统计总览', subtext: '', x: 'left', textStyle: { color: '#ccc' } }, tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' }, formatter: function (params) { if (typeof (params.value)[2] == "undefined") { //return params.name + ' : ' + params.value; } else {//只有数据不为空才显示 return params.name + ' : ' + params.value[2]; } } }, visualMap: { show: false, min: 0, max: 500, left: 'left', top: 'bottom', text: ['高', '低'], // 文本，默认为数值文本 calculable: true, seriesIndex: [1], inRange: { }, dimension: 0 }, //布局s grid: [ { x: '57%', y: '5%', width: '40%', height: '60%' }, { x: '57%', y: '70%', width: '40%', height: '25%' } ], xAxis: [{ title: "asdf", gridIndex: 0, type: 'value', max: 10,//x轴刻度 axisLabel: { show: true, }, splitLine: { show: true } }, { gridIndex: 1, type: 'category', axisLabel: { show: true, }, splitLine: { show: true }, data: ['2018-07-30', '2018-07-31', '2018-08-01', '2018-08-02', '2018-08-03', '2018-08-04', '2018-08-05', '2018-08-06'] }], yAxis: [{ gridIndex: 0, type: 'category', axisLabel: { show: true, textStyle: { color: '#ddd' } } }, { gridIndex: 1, type: 'value', axisLabel: { show: true, textStyle: { color: '#ddd' } } }], //布局e geo: { show: true, map: 'zhengzhou', label: { normal: { show: false }, emphasis: { show: false, } }, roam: false,//是否开启鼠标缩放和平移漫游 itemStyle: { normal: { areaColor: 'transparent', borderColor: '#3fdaff', borderWidth: 2, shadowColor: 'rgba(63, 218, 255, 0.5)', shadowBlur: 30 }, emphasis: { areaColor: '#2B91B7', } } }, //调整显示级别 layoutCenter: ['32%', '52%'], layoutSize: 900, series: [ { name: '地图台站', type: 'effectScatter', coordinateSystem: 'geo', data: convertData(data.sort(function (a, b) { return b.value - a.value; }).slice(0, 5)), symbolSize: function (val) { //return val[2] / 10;//地图闪动 return 20; }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { color: '#F4E925', shadowBlur: 10, shadowColor: '#05C3F9' } }, zlevel: 1 }, { name: '政治面貌', type: 'pie', z: 2, color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'], selectedMode: 'single', radius: [0, '15%'], center: ['20%', '80%'], label: { normal: { position: 'inner' } }, labelLine: { normal: { show: false } }, //显示series中信息，提示框组件 tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, data: [{ value: 2, name: '无党派人士' }, { value: 4, name: '党员', selected: true }, { value: 5, name: '团员' }, { value: 1, name: '其它' }] }, { name: '年龄占比', type: 'pie', z: 2, // 全局调色盘。 color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'], radius: ['20%', '30%'], center: ['20%', '80%'], label: { formatter: "{b}占{d}%" }, itemStyle: { //itemStyle有正常显示：normal，有鼠标hover的高亮显示：emphasis emphasis: { //normal显示阴影,与shadow有关的都是阴影的设置 shadowBlur: 10, //阴影大小 shadowOffsetX: 0, //阴影水平方向上的偏移 shadowColor: 'rgba(0, 0, 0, 0.5)' //阴影颜色 } }, //显示series中信息，提示框组件 tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, data: [{ value: 2, name: '18-25' }, { value: 8, name: '26-30' }, { value: 2, name: '31-40' }, { value: 0, name: '41-55' }, { value: 12, name: '55以上' }] } , { id: 'bar', name: '台站排名', type: 'bar', xAxisIndex: 0, yAxisIndex: 0, label: { normal: { show: true, position: ["100%", "40%"], color: "#ffffff", formatter: "{b} : {c}" } }, tooltip: { trigger: 'item', formatter: "{b} : {c}" }, itemStyle: { //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组 color: function (params) { var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']; return colorList[params.dataIndex]; } }, z: 2, data: [{ value: 3, name: '河南省' }, { value: 1, name: '河南' }, { value: 1, name: '北京市' }, { value: 1, name: '天津市' }, { value: 2, name: '上海市' }, { value: 1, name: '河北省' }, { value: 1, name: '山西省' }, { value: 0, name: '辽宁省' }, { value: 1, name: '吉林省' }, { value: 0, name: '新疆' }, { value: 1, name: '西藏' }, { value: 0, name: '内蒙古' }, { value: 0, name: '四川省' }, { value: 0, name: '青海省' }, { value: 0, name: '广东省' }, { value: 0, name: '湖南省' }] }, { name: '请假', type: 'bar', xAxisIndex: 1, yAxisIndex: 1, tooltip: { trigger: 'item', formatter: "{a} : {c}" }, data: [1, 3, 2, 4, 1, 4, 3] }, { name: '迟到', type: 'bar', xAxisIndex: 1, yAxisIndex: 1, tooltip: { trigger: 'item', formatter: "{a} : {c}" }, data: [1, 2, 3, 4, 3, 2, 2] }, { name: '早退', type: 'bar', xAxisIndex: 1, yAxisIndex: 1, tooltip: { trigger: 'item', formatter: "{a} : {c}" }, data: [1, 2, 3, 4, 3, 2, 4] }, { name: '调休', type: 'bar', xAxisIndex: 1, yAxisIndex: 1, tooltip: { trigger: 'item', formatter: "{a} : {c}" }, data: [1, 3, 2, 4, 1, 4, 2] }, { name: '加班', type: 'bar', xAxisIndex: 1, yAxisIndex: 1, tooltip: { trigger: 'item', formatter: "{a} : {c}" }, data: [1, 3, 2, 4, 1, 4, 2] }, { name: '旷工', type: 'bar', xAxisIndex: 1, yAxisIndex: 1, tooltip: { trigger: 'item', formatter: "{a} : {c}" }, data: [1, 3, 2, 4, 1, 4, 2] } ] }; myChart.setOption(option); //重置容器高宽 resizeWorldMapContainer(); myChart.resize(); redoMethod(); //用于使chart自适应高度和宽度 window.onresize = function () { //重置容器高宽 resizeWorldMapContainer(); myChart.resize(); }; //循环做某些事情 myChart.on('click', function (params) { if (params.data) { //var index = JSON.stringify(data).indexOf(params.data.name);//结果：index=1 //if (index >= 0) {//只对地图点击事件做判断 //点击某某台，考勤自动变更 //1.点击地图变更2.点击排行变更 if (params.seriesIndex == 0 || params.seriesIndex == 3) { if ($("#btnSet").attr("title") == "点击停止") { $("#btnSet").trigger('click'); } redoMethod(params.data.name); } //if (params.seriesIndex==3) { // alert(params.data.name); // //if ($("#btnSet").attr("title") == "点击停止") { // // $("#btnSet").trigger('click'); // //} // //redoMethod(params.data.name); //} } }); }); </script>
5. 定时循环jquery实现
地图上的散点闪动5秒切换一次，所有地图信息参与轮询。具体js代码如下：