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);
                            })        
    }
  • 相关阅读:
    ruby 实现java中的aes 加密解密
    移动端手机端web页面中背景图固定问题
    hooks 组件对应的生命周期
    React 生命周期函数总结
    Sequelize 常用增删改查函数
    如何验证SSH的连通性
    如何生成SSH密钥
    如何查看本机ssh秘钥
    如何更改本地代码仓库指向
    如何发布npm 包
  • 原文地址:https://www.cnblogs.com/hurenjie/p/14870088.html
Copyright © 2011-2022 走看看