zoukankan      html  css  js  c++  java
  • 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/>u70B9u4F4Du5907u6848u6570:" + params.data.locationCount + "<br/>
                                    u70B9u4F4Du6D3Bu8DC3:" + params.data.active + "<br/>
                                    u5F53u65E5u8FC7u8F66u8F86:" + params.data.pass + "<br/>
                                    u5F53u65E5u8FC7u8F66u8F86u53BBu91CD:" + 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);
                            })        
    }
  • 相关阅读:
    猫与老鼠的故事(委托)
    返回类型协变和参数类型逆变
    HTTP 方法:GET 对比 POST
    Ajax
    django(未解决的问题)
    mysql开机启动
    apache的不同路径conf/httpd.conf有什么区别【转载】
    Apache部署Django过程中遇到的一些问题
    执行django-admin.py startproject XXX报错的问题
    yum安装软件的过程中出现的一些问题
  • 原文地址:https://www.cnblogs.com/hurenjie/p/14870088.html
Copyright © 2011-2022 走看看