eacher可视化3D地体

var myChart = echarts.init(document.getElementById('map'));

	let data = [
		// {
		//         name: "北京",
		//         value: [116.24, 39.55, 100]
		//     },
		//     {
		//         name: "深圳",
		//         value: [114.271522, 22.753644]
		//     },
		   
		//     {
		//         name: "重庆",
		//         value: [106.54, 29.59]
		//     },
		//     {
		//         name: "浙江",
		//         value: [120.19, 30.26]
		//     },
		// 	{
		// 		name: "上海",
		// 		value: [121.4648, 31.2891]
		// 	},

		
		]
		let LableData = [
		//     {
		//     name: "北京",
		//     coords: [
		//         [116.24, 39.55, 100],
		//         [120.24, 46.55, 100]
		//     ], // 线条位置[开始位置,结束位置]
		//     value: [1021, 120]
		// }, 
		// {
		//     name: "深圳",
		//     coords: [
		//         [114.271522, 22.753644],
		//         [118.24, 18.55, 100]
		//     ], // 线条位置[开始位置,结束位置]
		//     value: [1021, 120]
		// }, 
		// {
		//     name: "重庆",
		//     coords: [
		//         [106.54, 29.59],
		//         [104.24, 35.55]
		//     ], // 线条位置[开始位置,结束位置]
		//     value: [1021, 120]
		// }, 
		// {
		//     name: "浙江",
		//     coords: [
		//         [120.19, 30.26],
		//         [125.24, 27.55, 100]
		//     ], // 线条位置[开始位置,结束位置]
		//     value: [1021, 120]
		// },
		// 	{
		// 		name: "上海",
		// 		coords: [
		// 			[121.4648, 31.2891],
		// 			[122.4648, 32.2891]
		// 		], // 线条位置[开始位置,结束位置]
		// 		value: [1201, 60]
		// 	},
		];
		
		option = {
		    /*backgroundColor: '#000f1e',*/
		    geo: {
		        map: 'china',
		        aspectScale: 0.85,
		        layoutCenter: ["50%", "50%"], //地图位置
		        layoutSize: '100%',
		        itemStyle: {
		            normal: {
		                shadowColor: '#276fce',
		                shadowOffsetX: 0,
		                shadowOffsetY: 15,
		                opacity: 0.5,
		            },
		            emphasis: {
		                areaColor: '#276fce',
		
		            }
		        },
				regions: [
					{
		            name: '南海诸岛',
		            itemStyle: {
		                areaColor: 'rgba(0, 10, 52, 1)',
		
		                borderColor: 'rgba(0, 10, 52, 1)',
		                normal: {
		                    opacity: 0,
		                    label: {
		                        show: false,
		                        color: "#009cc9",
		                    }
		                },
		
		
		            },
		            label: {
		                show: false,
		                color: '#FFFFFF',
		                fontSize: 12,
		            },
		
		
					}
				],
		
		    },
		    series: [
		        // 常规地图
		        {
		            type: 'map',
		            mapType: 'china',
		            aspectScale: 0.85,
		            layoutCenter: ["50%", "50%"], //地图位置
		            layoutSize: '100%',
		            zoom: 1, //当前视角的缩放比例
		            // roam: true, //是否开启平游或缩放
		            scaleLimit: { //滚轮缩放的极限控制
		                min: 1,
		                max: 2
		            },
		            itemStyle: {
		                normal: {
		                    areaColor: '#0c274b',
		                    borderColor: '#1cccff',
		                    borderWidth: 1.5
		
		
		                },
		                emphasis: {
		                    areaColor: '#02102b',
		                    label: {
		                        color: "#fff"
		                    }
		
		                }
		            },
		
		
		        },
		        
		        // 区域散点图
		        {
		            type: 'effectScatter',
		            coordinateSystem: 'geo',
		            zlevel: 2,
		            symbolSize: 10,
		            rippleEffect: { //坐标点动画
		                period: 3,
		                scale: 5,
		                brushType: 'fill'
		            },
		            label: {
		                normal: {
		                    show: true,
		                    position: 'right',
		                    formatter: '{b}',
		                    color: '#b3e2f2',
		                    fontWeight: "bold",
		                    fontSize: 16
		                }
		            },
		
		            data: data,
		            itemStyle: { //坐标点颜色
		                normal: {
		                    show: true,
		                    color: '#ff8003',
		                    shadowBlur: 20,
		                    shadowColor: '#fff'
		                },
		                emphasis: {
		                    areaColor: '#f00'
		                }
		            },
		
		        },

		       
		        {
		
		            type: 'lines',
		            zlevel: 3,
		            symbol: 'circle',
		            symbolSize: [5, 5],
		            color: '#ff8003',
		            opacity: 1,
		            label: {
		                show: true,
		                padding: [10, 20],
		                color: '#fff',
		                backgroundColor: "#1a3961",
		                borderColor: '#aee9fb',
		                borderWidth: 1,
		                borderRadius: 6,
		                // formatter(params) {

		                //     let arr = [params.name, "废水污染:" + params.value[1] + "家", "废气污染:" + params.value[0] + "家"];
		                //     return arr.join("\n")
		                // },
		                textStyle: {
		                    align: 'left',
		                    lineHeight: 20,
		                }
		                /* normal: {
		
		                     textStyle: {
		                         color: '#fff',
		                         fontSize: 9,
		                     },
		                     formatter (value){
		                         return value.data.value[2]
		                     },
		
		                 }*/
		            },
		            lineStyle: {
		                type: 'solid',
		                color: '#fff',
		                width: 0.5,
		                opacity: 1,
		
		            },
		            data: LableData,
		
		
		        },
		    ]
		};
		
		myChart.on('click', function(params) {
		    console.log(params);
		});
		myChart.setOption(option);
		window.addEventListener("resize",function(){
	        myChart.resize();
	    });
		
	}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值