echarts地图轮播功能+鼠标事件

admin 管理员组

文章数量: 886993

echarts地图轮播功能+鼠标事件

效果图

准备个div放map

地图的展示

/* echarts地图和折线图的展示 *///地图展示var uploadedDataURL = ".json";var mapChart = echarts.init(document.getElementById('container1'));function showMap(seriesCheckin, seriesDemandSq, seriesServiceProject) {var option;//数据载入时动画mapChart.showLoading();$.getJSON(uploadedDataURL,function(geoJson) {mapChart.hideLoading();echarts.registerMap('抚州市', geoJson);mapChart.setOption(option = {//显示悬浮窗口tooltip : {trigger : 'item',formatter : function(params) {//定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面var res = params.name+ '<br />';areaName = params.name;//定义一个变量来保存series数据系列var myseries = option.series;//循环遍历series数据系列for (var i = 0; i < myseries.length; i++) {//在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res中供显示for (var k = 0; k < myseries[i].data.length; k++) {//如果data数据中的name和地区名称一样if (myseries[i].data[k].name == params.name) {//将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中res += myseries[i].name+ ':'+ myseries[i].data[k].value+ '<br />';}}}return res;},},series : [{/* 养老机构入住申请数量统计  seriesCheckin */name : '养老机构入住申请',type : 'map',mapType : '抚州市',aspectScale : 0.9, //地图宽高比layoutCenter : [ '60%','50%' ], //地图中心点位置['50%','50%']代表在最中间layoutSize : '100%', //地图大小，此处设置为100%label : { //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等normal : {show : true, //是否在普通状态下显示标签。textStyle : {color : "#000000FF",//文字颜色fontStyle : "normal",//italic斜体  oblique倾斜fontWeight : "normal", //文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...fontSize : 12,}}},//地图样式itemStyle : {normal : {borderWidth : 1,//边际线大小borderColor : '#0653C6E1',//边界线颜色areaColor : '#bdd4f4',//默认区域颜色shadowColor : "#000",//阴影颜色shadowBlur : 1,//图形阴影的模糊大小。opacity : 1,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。}},emphasis : { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式) label : { // label高亮时的配置show : true,textStyle : {color : '#FFFFFFFF', // 高亮时标签颜色变为 白色fontSize : 15, // 高亮时标签字体 变大}},itemStyle : { // itemStyle高亮时的配置areaColor : '#006cff', // 高亮时地图板块颜色改变}},data : seriesCheckin,},{name : '社区居家养老服务',type : 'map',mapType : '抚州市',data : seriesDemandSq,},{name : '服务项目数量',type : 'map',mapType : '抚州市',data : seriesServiceProject,}]});//调用轮播cycleShow(mapChart, option);});};

轮播功能

//轮播//用于初始化次数,否则导致鼠标移入和click事件中的查询次数逐渐增多var search_num = 0;//用于记录轮播时候的索引var lb_areaname = "";function cycleShow(mapChart, option) {var app = {};app.currentIndex = -1;var timer;//设置开始执行对应行为的时间setTimeout(startTimer, 500);function changeStyle() {//获取图表的位置var option = mapChart.getOption();var dataLen = option.series[0].data.length;// 取消之前高亮的图形,让下一个图形继续高亮,形成轮播的效果mapChart.dispatchAction({type : 'downplay',seriesIndex : 0,dataIndex : app.currentIndex});app.currentIndex = (app.currentIndex + 1) % dataLen;// 高亮当前图形mapChart.dispatchAction({type : 'highlight',seriesIndex : 0,dataIndex : app.currentIndex});lb_areaname = option.series[0].data[app.currentIndex].name// 显示 tooltipmapChart.dispatchAction({type : 'showTip',seriesIndex : 0,dataIndex : app.currentIndex});}//启动计时器function startTimer() {//启动之前先把定时器清空stopTimer();//setInterval调用的是函数名timer = setInterval(changeStyle, 2000);}//停止计时器function stopTimer() {clearInterval(timer);}//定义一个mouse_flag = false; 未移入 var mouse_flag = false;mapChart.on('mouseover', function(params) {search_num = 0;mouse_flag = true;//判断轮播的区域name是不是跟鼠标移入的区域name是同一个,否则取消轮播的区域的高亮if(lb_areaname!=params.name){mapChart.dispatchAction({type : 'downplay',seriesIndex : 0,dataIndex : app.currentIndex});}stopTimer();mapChart.on('click', function(params) {//点击查询折线图stopTimer();search_num += 1;if (search_num == 1) {queryListLineChart();}})})//为了判断鼠标是否在map区域中还是在div除map外的空白区域mapChart.on('mouseout', function(params) {if (params.name != "南城县" || params.name != "黎川县"|| params.name != "南丰县" || params.name != "崇仁县"|| params.name != "乐安县" || params.name != "宜黄县"|| params.name != "金溪县" || params.name != "资溪县"|| params.name != "东乡区" || params.name != "广昌县") {mouse_flag = false;} else {mouse_flag = true;}});container1.ondblclick = function() {if (mouse_flag) {stopTimer();queryListLineChart();} else {areaName = "";queryListLineChart();startTimer();}}option && mapChart.setOption(option);}; 

本文标签： echarts地图轮播功能鼠标事件