e-char 的map地图,轮播鼠标移入事件

function mapGeo(data) {
     var chart = echarts.init(document.getElementById('mapGeo'));
                var mapUrl = staticsUrl + '/js/echart-map/beijing.json';
                $.get(mapUrl, function (mapJson) {
                    echarts.registerMap('beijing', mapJson);
                   
                    chart.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: function formatter(params) {
                                return params.name + "<br/>\u70B9\u4F4D\u5907\u6848\u6570:" + params.data.locationCount + "<br/>\n                                \u70B9\u4F4D\u6D3B\u8DC3:" + params.data.active + "<br/>\n                                \u5F53\u65E5\u8FC7\u8F66\u8F86:" + params.data.pass + "<br/>\n                                \u5F53\u65E5\u8FC7\u8F66\u8F86\u53BB\u91CD:" + params.data.remoPass + "<br/>";
                            },
        position:'inside'  //设置定位很重要不然提示框会偏移
                        },
                        series: [{
                            name: '北京市各区多维数据统计',
                            type: 'map',
                            map: 'beijing',
                            radius: '80%',
                            layoutCenter: ['50%', '50%'],
                            layoutSize: '100%',
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: { color: "#fff" }
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: { color: "#fff" }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderWidth: .5, //区域边框宽度
                                    borderColor: '#fff', //区域边框颜色
                                    areaColor: "#0a89e2" //区域颜色
                                },
                                emphasis: {
                                    borderWidth: .5,
                                    borderColor: '#fff',
                                    areaColor: "#f7981f"
                                }
                            },
                            // data : data//人口数据:例如[{name:'济南',value:'100万'},{name:'菏泽',value:'100万'}......]
                            data: data
                        }]
                    });
                });
            var hourIndex=0;
            var fhourTime=null;
             fhourTime=setInterval(function(){
                chart.dispatchAction({
                    type:"downplay",
                    seriesIndex:0,
                
                });
                chart.dispatchAction({
                    type:"highlight",
                    seriesIndex:0,
                    dataIndex:hourIndex
                });
                chart.dispatchAction({
                    type:"showTip",
                    seriesIndex:0,
                    dataIndex:hourIndex
                });
                    hourIndex++;
                    if(hourIndex>data.length){
                        hourIndex=0;
                    }
            },3000);
            //鼠标移入停止轮播
                chart.on("mousemove", function(e) {
                            clearInterval(fhourTime)
                            chart.dispatchAction({
                                type: "downplay",
                                seriesIndex: 0,
                            });
                            chart.dispatchAction({
                                type: "highlight",
                                seriesIndex: 0,
                                dataIndex: e.dataIndex
                            });
                            chart.dispatchAction({
                                type: "showTip",
                                seriesIndex: 0,
                                dataIndex: e.dataIndex
                            });
                        })
                        //鼠标移出恢复轮播
                chart.on("mouseout", function() {
                            fhourTime = setInterval(function() {
                                chart.dispatchAction({
                                    type: "downplay",
                                    seriesIndex: 0,
 
                                });
                                chart.dispatchAction({
                                    type: "highlight",
                                    seriesIndex: 0,
                                    dataIndex: hourIndex
                                });
                                chart.dispatchAction({
                                    type: "showTip",
                                    seriesIndex: 0,
                                    dataIndex: hourIndex
                                });
                                hourIndex++;
                                if (hourIndex > data.length) {
                                    hourIndex = 0;
                                }
                            }, 3000);
                        })        
}

 

posted @ 2021-06-10 10:33  嘿,你好!  阅读(651)  评论(0编辑  收藏  举报