chendeben
/
shadowsocks5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
							<?php  if (!defined("IS_INITPHP")) exit("Access Denied!");  /* INITPHP Version 1.0 ,Create on 2018-02-09 11:06:46, compiled from /data/wwwroot/www.shadowsocks5.com/app/template/ss/index/map.html */ ?>
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:800px"></div>
    <!-- ECharts单文件引入 -->
    <script src="https://www.shadowsocks5.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'https://www.shadowsocks5.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
             'echarts',
             'echarts/chart/line',
             'echarts/chart/bar',
             'echarts/chart/scatter',
             'echarts/chart/k',
             'echarts/chart/pie',
             'echarts/chart/radar',
             'echarts/chart/force',
             'echarts/chart/chord',
             'echarts/chart/gauge',
             'echarts/chart/funnel',
             'echarts/chart/eventRiver',
             'echarts/chart/venn',
             'echarts/chart/treemap',
             'echarts/chart/tree',
             'echarts/chart/wordCloud',
             'echarts/chart/heatmap',
             'echarts/chart/map'
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                var option = {
                		dataRange: {
                	        min: 0,
                	        max: 3000,
							orient: 'horizontal', 
							splitNumber: 30, 
							color:['#31A829','#D8F6D5'],
                	        //color:['#1556A1','#136BD4','#6C98D5','#9FCCFF','#DCECFF'],
							x: 'right',
							y: 'top',
                	        calculable : true
                	    },
						title: {
						    text: '用户分布图',
						    left: 'center'
						},
                	    series : [
                	              {
                	                  name: 'Map',
                	                  type: 'map',
                	                  mapType: 'china',
                	                  label: {
                	                      normal: {
                	                          show: true
                	                      },
                	                      emphasis: {
                	                          show: true
                	                      }
                	                  },
                	                  label: {
                	                      normal: {
                	                          show: true
                	                      },
                	                      emphasis: {
                	                          show: true
                	                      }
                	                  },
                	                  mapLocation: {
                	                      x : 'left',
                	                      y : 'top',
                	                      height : 500
                	                  },
                	                  selectedMode: 'multiple',
                	                  data:[<?php foreach ($china as $k1=>$v1) { ?>{
           	                           name: '<?php echo $v1;?>',
        	                           value: <?php echo $value[$k1];?>,
        	                      },<?php } ?>
                	                  ],
                	              }
                	          ],
                	          tooltip : {
        	                      trigger: 'item',
        	                      formatter:'{b}:{c}'
        	                  },
        	                  
                	      };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>