duhongyu
/
AnYang_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="main" style="width: 800px;height: 600px;"></div>
	</body>
	<script src="js/echarts.min.js"></script>
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript">
		var uploadedDataURL = "https://geo.datav.aliyun.com/areas_v2/bound/410500_full.json";
		var myChart = echarts.init(document.getElementById('main'));
		var center = {
		    "安阳县": [114.295989, 36.231785],
		    "北关区": [114.379621, 36.137115],
		    "滑县": [114.667181, 35.465867],
		    "龙安区": [114.254489, 36.044375],
		    "高新区": [114.310095, 36.115555],
		    "殷都区": [114.289197, 36.133648],
		    "文峰区": [114.418257, 36.034251],
		    "汤阴县": [114.455689, 35.902302],
		    "内黄县": [114.8165, 35.900576],
		    "林州市": [113.854634, 36.010256]
			}
			console.log(Object.keys(center).map(name => {return {
				name: name,
				value: Math.random()*100
			}}))
			var points = [{
					name: '安阳县',
					value: [114.295989,36.231785]
				},
				{
					name: '北关区',
					value: [114.379621,36.137115]
				},
				{
					name: '滑县',
					value: [ 114.667181,35.465867]
				},
				{
					name: '龙安区',
					value: [114.254489,36.044375]
				},
				{
					name: '林州市',
					value: [113.854634,36.010256]
				},
				{
					name: '内黄县',
					value: [114.8165,35.900576]
				},
				{
					name: '汤阴县',
					value: [ 114.455689,35.902302]
				},
				{
					name: '文峰区',
					value: [114.418257,36.034251]
				},
				{
					name: '殷都区',
					value:[114.289197,36.133648]
				}
			];
		var option = null;
		$.get(uploadedDataURL, function(json) {
		    echarts.registerMap('js', json);
		    option = {
		        visualMap: {
		            show: true,
		            max: 100,
					seriesIndex: [0],
					calculable: true,
		        },
		        geo: [{
		            map: 'js',
		            roam: false, //是否允许缩放
		            zoom: 1.1, //默认显示级别
		            scaleLimit: {
		                min: 0,
		                max: 3
		            }, //缩放级别
		            itemStyle: {
		                normal: {
		                    // areaColor: '#013C62',
		                    shadowColor: '#013C62',
		                    shadowBlur: 20,
		                    shadowOffsetX: -5,
		                    shadowOffsetY: 15,
		                }
		            },
		            tooltip: {
		                show: false
		            }
		        }],
		        series: [
		            //地图
		            {
		                type: 'map',
		                mapType: 'js',
		                geoIndex: -1,
		                zoom: 1.1, //默认显示级别
		                label: {
		                    show: true,
		                    color: '#ffffff',
		                    emphasis: {
		                        color: 'white',
		                        show: false
		                    }
		                },
		                itemStyle: {
		                    normal: {
		                        borderColor: '#2980b9',
		                        borderWidth: 1,
		                        areaColor: '#12235c'
		                    },
		                    emphasis: {
		                        areaColor: '#FA8C16',
		                        borderWidth: 0,
		                        color: 'green'
		                    }
		                },
		                data: Object.keys(center).map(name => {return {
		                    name: name,
		                    value: Math.random()*100
		                }})
		            },
					{
					    type: 'effectScatter',
					    coordinateSystem: 'geo',
					    showEffectOn: 'render',
					    rippleEffect: {
					        period: 5,
					        scale: 5,
					        brushType: 'fill'
					    },
					    hoverAnimation: true,
					    // label: {
					    //     formatter: '{b}',
					    //     position: 'right',
					    //     offset: [15, 0],
					    //     color: '#f0f',
					    //     show: true
					    // },
						itemStyle: {
						    normal: {
						        color: '#f0f',
						        shadowBlur: 10,
						        shadowColor: '#ff0'
						    }
						},
					    emphasis: {
							show: false,
					        itemStyle: {
					            opacity: 1, //线条宽度
					        }
					    },
					    data:  points
					}, {
					    name: '供应商A',
					    type: 'lines',
					    zlevel: 2,
					    symbol: ['none', 'arrow'],
					    symbolSize: 7,
					    effect: {
					        show: true,
					        period: 4,
					        trailLength: 0.02,
					        symbol: 'circle',
					        symbolSize: 4,
					        color: '#fff'
					    },
					    lineStyle: {
							color: '#f0f',
					        width: 0.5, //线条宽度
					        opacity: 0.5, //尾迹线条透明度
					        curveness: .3, //尾迹线条曲直度
					        shadowBlur: 10,
					    },
					    emphasis: {
					        lineStyle: {
					            width: 2, //线条宽度
					        }
					    },
					    data: [{
					        name: '供应商A->BossSoft',
					        // value: 40,
					        coords: [
					            [113.854634,36.010256],
					             [114.418257,36.034251]
					        ],
					    }]
					}, {
					    name: '供应商B',
					    type: 'lines',
					    zlevel: 2,
					    symbol: ['none', 'arrow'],
					    symbolSize: 7,
					    effect: {
					        show: true,
					        period: 4,
					        trailLength: 0.02,
					        symbol: 'circle',
					        symbolSize: 4,
					        color: '#fff'
					    },
					    lineStyle: {
					        width: 0.5, //线条宽度
					        opacity: 0.5, //尾迹线条透明度
					        curveness: 0.3, //尾迹线条曲直度
					        shadowBlur: 10,
					    },
					    emphasis: {
					        lineStyle: {
					            width: 2, //线条宽度
					        }
					    },
					    data: [{
					        name: '供应商B->BossSoft',
					        // value: 80,
					        coords: [
					            [114.295989,36.231785],
					             [114.418257,36.034251]
					        ]
					    }]
					}
		        ]
		    };
		    myChart.setOption(option);
		});
	</script>
</html>