duhongyu
/
AnYang_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="main" style="width: 1700px;height: 800px;"></div>
	</body>
	<script src="js/echarts.min.js"></script>
	<script src="js/jquery.min.js"></script>
	<script>
		var uploadedDataURL = "format.1629790904713.json";
		var myChart = echarts.init(document.getElementById('main'));
		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]
			}
		];
		// let colors = ['#FF8C00', '#00acea', '#1DE9B6'];
		$.getJSON(uploadedDataURL, function(geoJson) {
		    echarts.registerMap('anyang', geoJson);
		    option = {
		        
		        // color: ['#FF8C00', '#00acea', '#1DE9B6'],
		        tooltip: {
		            trigger: 'item',
		            formatter: '{b}'
		        },
		       visualMap: {//visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
				   show: true,//是否显示组件
				   max: 20,//指定 visualMapContinuous 组件的允许的最大值
				   left: '5%',
				   top: 'bottom',
				   bottom:'5%',
				   text: ['高', '低'],//两端的文本，如 ['High', 'Low']
				   calculable: true,//是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
				   // inRange: {//定义 在选中范围中 的视觉元素。
					  //  color: [ '#416cbb' ,'#00b4ff', '#00deff' ,'#00ffe4', '#79fff1', '#fff17b', '#ffd200'],//图元的颜色。
				   // },
				   textStyle: {//设置文字颜色（Demo左下组件）
					   color: '#eee'
				   }
			   },
		        geo: {
		            map: 'anyang',
		            show: true
		        },
		        series: [{
		            type: 'map',
		            map: 'anyang',
		            aspectScale: 0.75,
					// backgroundColor: ,
		            itemStyle: {
		                borderColor: 'rgba(100,149,237,1)',
		                borderWidth: 0.5,
		                areaColor: '#0ff'
		            },
		            // label: {
		            //     show: true,
		            //     textStyle: {
		            //         color: '#fff'
		            //     },
		            //     emphasis: {
		            //         textStyle: {
		            //             color: '#fff'
		            //         }
		            //     }
		            // },
		            emphasis: {
		                label: {
		                    show: false
		                },
		                itemStyle: {
		                    areaColor: 'rgba(0,0,0,0)',
		                }
		            }
		
		        }
				, {
		            type: 'effectScatter',
		            coordinateSystem: 'geo',
		            showEffectOn: 'render',
		            rippleEffect: {
		                period: 5,
		                scale: 5,
		                brushType: 'fill'
		            },
		            hoverAnimation: true,
		            label: {
		                formatter: '{b}',
		                position: 'right',
		                offset: [15, 0],
		                color: '#fff',
		                show: true
		            },
					itemStyle: {
					    normal: {
					        color: '#f0f',
					        shadowBlur: 10,
					        shadowColor: '#ff0'
					    }
					},
		            itemStyle: {
		                color: '#fff',
		                shadowBlur: 10,
		                shadowColor: '#333',
		                opacity: 0.75
		            },
		            emphasis: {
		                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: {
		                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>