1. 程式人生 > >echarts 地圖實現輪播(一)

echarts 地圖實現輪播(一)

<!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'));
        
        var dataMap = [{ name: '利通區' }, { name: '青銅峽市' }, { name: '鹽池縣' },{ name: '紅寺堡區' },{ name: '同心縣' },{ name: '上海' }];
         
        option = {
            title: {
            	x: 'left',
            	y: 'top',
                text: '2015吳忠市人口數量',
                subtext:"人口密度資料來自吳忠市統計局年鑑"
            },
            
             tooltip: {
            //trigger: 'item',
            //formatter: '{b}<br/>{c} (人)'
            //pointFormat: '{series.name}: <b>{point.y:.0f} ({point.percentage:.1f}%)</b>'
        
        },
              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 = 5; // series.data.length
                  var count = 1;
                 var count1 = 0;
            function autoTip() {
            	
                setInterval(function() {
                	 
                	playState: false;
                    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();
            

//         var a=$("canvas");
//         var b=a[0].getContext('2d');
//       
//         console.info("a:"+a);
//          console.info("b:"+b);
//
//
//             for(var i in b){//通過定義一個區域性變數i遍歷獲取map裡面的所有key值
//              console.info(b[i]); //通過獲取key對應的value值
//                }
});
 </script>
</html>