echarts 地图实现轮播(二)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_38959210/article/details/81477332

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="js/jquery-2.0.0.js" ></script>
   
   
    <script type="text/javascript" src="js/echarts.min.js" ></script>

     
    
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:500px;"></div>
    


</body>
   <script type="text/javascript">


           
           
	    	$.get('jspro/wuzhong.json', function (gansuJson){
        echarts.registerMap('北京', gansuJson);
        var chart = echarts.init(document.getElementById('main'));
        
         
        option = {
            title: {
            	x: 'left',
            	y: 'top',
                text: '',
                subtext:""
            },
            
             tooltip: {
            trigger: 'item',
            //formatter: '{b}<br/>{c} (人)'
            //pointFormat: '{series.name}: <b>{point.y:.0f} ({point.percentage:.1f}%)</b>'
        formatter:function(value){
        	return value.name+" "+value.value+"人";
 
        }
      
        },
              toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
            
//      visualMap: {
//          min: 170259,
//          max: 401178,
//          text:['max','min'],
//          realtime: false,
//          calculable: true,
//          inRange: {
//              color: ['lightskyblue','yellow', 'orangered']
//          }
//      },

            series:[
            	{
            		name:'人口数量',
            		type:'map',
            		map:'北京',
            	
            		mapLocation:{
            			y:100
            		},
            		itemSytle:{
            			normal:{label:{show:true}},
            			emphasis:{label:{show:false}}
            		},
            		 label: {
                    normal: {show: true},
                    emphasis: {show: true},
                    
                   },
            		data:[
            			{name:'利通区',value:401178},
            			{name:'青铜峡市',value:281953},
            			{name:'盐池县',value:170259},
            			{name:'红寺堡区',value:171110},
            			{name:'同心县',value:371027}
            		
            		],
            						
            	}
            ],
            
        };
        chart.setOption(option);

         //悬浮事件后获取name和value的值 
          chart.on("mouseover",function(params){
          	var name=params.name;
          	var value=params.value;
          	console.info(name+"\n"+value);
          })
          
          
           var timer = null;
          

                total = 11; // series.data.length
                  var count = 1;
                 var count1 = 0;
            function autoTip() {
            	
                setInterval(function() {
                	 
            
                    var curr = count % total;
                   //console.info("curr:"+curr);
                    chart.dispatchAction({
                        type: 'mapSelect',
                        seriesIndex: 0, // 因为只有一组数据,所以此处应为0
                        dataIndex: curr
                    });
                    count += 1;
                }, 1000);
            setInterval(function() {
                    var curr1 = count1 % total;
                  // console.info("curr1:"+curr1);
                    chart.dispatchAction({
                        type: 'mapUnSelect',
                        seriesIndex: 0, // 因为只有一组数据,所以此处应为0
                        dataIndex: curr1
                    });
                    count1 += 1;
                }, 1000); 

            }

              //autoTip();
            
             autohover();






 function autohover(data){
var count = 0;
var timeTicket = null;
var dataLength = 11;//此处设置的是需要轮播的次数
timeTicket && clearInterval(timeTicket);
timeTicket = setInterval(function() {
    chart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,

    });
    chart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: (count) % dataLength
    });
    chart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: (count) % dataLength
    });
    count++;
}, 1000);

chart.on('mouseover', function(params) {
    clearInterval(timeTicket);
    chart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0
    });
    chart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: params.dataIndex
    });
    chart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: params.dataIndex,
    });
});
chart.on('mouseout', function(params) {
    timeTicket && clearInterval(timeTicket);
    timeTicket = setInterval(function() {
        chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
        });
        chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: (count) % dataLength
        });
        chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: (count) % dataLength
        });
        count++;
    }, 1000);
});

} 







});
 </script>
</html>

 

阅读更多
换一批

没有更多推荐了,返回首页