echarts+h5制作各个城市的地图

小贞-10086

已于 2024-03-25 18:54:26 修改

阅读量1k

点赞数 17

文章标签： echarts 前端 javascript

于 2024-03-25 17:20:04 首次发布

本文链接：https://blog.csdn.net/ko_10086/article/details/137019700

版权

3D地图案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<script src="https://warehouse-lxf.gitee.io/develop/js/echarts/echarts.2.0.min.js"></script>
	<script src="https://warehouse-lxf.gitee.io/develop/js/echarts/echarts.2.0-gl.min.js"></script>
	<script src="https://warehouse-lxf.gitee.io/develop/js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="mp" style="height: 700px;width: 100%;margin:0px;padding: 0px;"></div>
<script>
    var option = option = {
					title: {
						text: '测试3D',
						textStyle: {
							color: '#000',
							fontSize: 18,
						},
					},
					geo3D: {
						map: 'cs',
						symbolSize: 1300,
						itemStyle: {
							color: '#ffaa7f',
							opacity: 1,
							borderWidth: 1,
							borderColor: '#ff0000',
						},
						viewControl: {
							beta: 0, //x轴旋转
							rotateSensitivity: 10, // 无法旋转
							panMouseButton:'left', // 平移
							panSensitivity:1,
						},
						label: {
							show: true,
							color: '#55ff7f',
							formatter: (v) => v.name,
						},
						emphasis: {
							//当鼠标放上去  地区区域是否显示名称
							label: {
								show: true,
							},
						},
						light: {
							//光照阴影
							main: {
								color: '#fff', //光照颜色
								intensity: 1.2, //光照强度
								shadowQuality: 'high', //阴影亮度
								shadow: false, //是否显示阴影
								alpha: 55,
								beta: 10,
							},
							ambient: {
								intensity: 0.3,
							},
						},
					},
					series: [
						{
							name: 'bar3D',
							type: 'bar3D',
							coordinateSystem: 'geo3D',
							barSize: 1, //柱子粗细
							shading: 'lambert', // 三维柱状图中三维图形的着色效果。
							bevelSize: 0, // 柱子的倒角尺寸  支持设置为从 0 到 1 的值。默认为 0，即没有倒角。
							label: {
								show: true,
								formatter: (v) => v.value[2],
								distance: 0.5, // 文字到图的距离
								textStyle: {
									color: 'rgba(255, 0, 0, 1.0)',
									fontSize: 14,
								}
							},
							itemStyle: {
								color: '#ff0000',
								opacity: 1,
							},
							data:[{
									name: '新城区',
									value: [108.979903, 34.27927, 10000],
								},
								{
									name: '碑林区',
									value: [108.946994, 34.251061, 4000],
								},
								{
									name: '莲湖区',
									value: [108.903194, 34.2656, 100],
								},
								{
									name: '灞桥区',
									value: [109.077261, 34.287453, 100],
								},
								{
									name: '未央区',
									value: [108.926022, 34.34923, 300],
								},
								{
									name: '雁塔区',
									value: [108.926593, 34.213389, 200],
								},
								{
									name: '阎良区',
									value: [109.27802, 34.642141, 200],
								},
								{
									name: '临潼区',
									value: [109.283986, 34.442065, 200],
								},
								{
									name: '长安区',
									value: [108.961579, 34.01097, 300],
								},
								{
									name: '高陵区',
									value: [109.088896, 34.535065, 400],
								},
								{
									name: '鄠邑区',
									value: [108.607385, 34.008668, 200],
								},
								{
									name: '蓝田县',
									value: [109.357634, 34.106189, 200],
								},
								{
									name: '周至县',
									value: [108.186465, 34.001532, 10000],
								},
								{
									name: '合计',
									value: [108.8, 33.999, 2800],
									itemStyle:{
										color:'#00aa00',
										opacity:0.5,
									},
									label: {
										show: true,
										formatter: (v) => v.value[2],
										distance: 0.5, // 文字到图的距离
										textStyle: {
											color: '#ff0000',
											fontSize: 18
										}
									},
								}
							],
						},
						{
							type: "lines3D",
							coordinateSystem: "geo3D", // 使用的坐标系
							zlevel: 10, // 设置这个才会有轨迹线的小尾巴
							polyline: false, // 是否是多段线
							blendMode: "lighter", // 该模式可以让数据集中的区域因为叠加而产生高亮的效果
							effect: { // 飞线的尾迹特效
								show: true,
								trailWidth: 3, // 尾迹的宽度
								trailLength: 0.1, // 尾迹的长度，范围从 0 到 1，为线条长度的百分比。特效尾迹长度[0,1]值越大，尾迹越长
								trailOpacity: 0.7, // 尾迹线条透明度
								trailColor: "#ff0000", // 尾迹的颜色，默认跟线条颜色相同
								constantSpeed: 5, // 轨迹特效的移动动画是否是固定速度，单位按三维空间的尺寸，设置为非 null 的值后会忽略 period 配置项。
								period: 8, // 尾迹特效的周期
								color: "#38bd98", // 移动点的颜色
							},
							lineStyle: {
								width: 1,
								color: 'rgba(62, 255, 49, 1)',
								opacity: 1
							},
							data: [
								[[108.979903, 34.27927],[108.8, 33.999]],
								[[108.946994, 34.251061],[108.8, 33.999]],
								[[108.903194, 34.2656],[108.8, 33.999]],
								[[109.077261, 34.287453],[108.8, 33.999]],
								[[108.926022, 34.34923],[108.8, 33.999]],
								[[108.926593, 34.213389],[108.8, 33.999]],
								[[109.27802, 34.642141],[108.8, 33.999]],
								[[109.283986, 34.442065],[108.8, 33.999]],
								[[108.961579, 34.01097],[108.8, 33.999]],
								[[109.088896, 34.535065],[108.8, 33.999]],
								[[108.607385, 34.008668],[108.8, 33.999]],
								[[109.357634, 34.106189],[108.8, 33.999]],
								[[108.186465, 34.001532],[108.8, 33.999]]
							],
						}
					],
				};
    $.get('./json/cs.json', function (chinaJson) {
        echarts.registerMap('cs', chinaJson);
        var chart = echarts.init(document.getElementById('mp'));
        chart.setOption(option);
    })
</script>
</body>
</html>

平面地图案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<script src="https://warehouse-lxf.gitee.io/develop/js/echarts/echarts.2.0.min.js"></script>
	<script src="https://warehouse-lxf.gitee.io/develop/js/echarts/echarts.2.0-gl.min.js"></script>
	<script src="https://warehouse-lxf.gitee.io/develop/js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="map" style="width: 1000px;height: 800px"></div>
<script type="text/javascript">
    var dt = [
        {name:'芙蓉区', value: 40000.34,text:'贷款笔数：54412<br/>贷款金额：468452.35万',selected:true},
        {name:'岳麓区', value: 38000,text:'缴存人数：32412'},
        {name:'开福区', value: 18000,text:'缴存人数：22412'},
        {name:'天心区', value: 15092,text:'缴存人数：42412'},
        {name:'雨花区', value: 28000,text:'缴存人数：52412'},
        {name:'望城区', value: 12000,text:'缴存人数：72412'},
        {name:'长沙县', value: 32000,text:'缴存人数：82412'},
        {name:'宁乡县', value: 5100,text:'缴存人数：6412'},
        {name:'浏阳市', value: 2200,text:'缴存人数：3412'},
        {name:'分中心', value: 4918,text:'缴存人数：66412'}
  
    ];
    var option = {
  
  
        title : {
            text: '长沙市',
            subtext: '各区县',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            type:'cross',
             //  backgroundColor:"#ff7f50",//提示标签背景颜色
             // textStyle:{color:"#000000"}, //提示标签字体颜色
             // formatter:function(param){
             // return dt[param.dataIndex].name + "<br />" +dt[param.dataIndex].text;
             // },
            alwaysShowContent: false,
            bordeRadius: 4,
            borderWidth: 1,
            borderColor: 'rgba(0,0,0,0.2)',
            backgroundColor: 'rgba(255,255,255,0.9)',
            padding: 0,
            // position: "top",
            textStyle: {
                fontSize: 12,
                color: '#333'
            },
            formatter: function(params) {
                var color = "#FFB84D";
                var a = "<div style='background-color:"+color+";padding: 5px 10px;text-align:center;color:white;font-size: 16px;'>" + dt[params.dataIndex].name + "</div>";
                var num = Math.ceil(params.data.name[1].length / 10);
                a += "<div style='padding:3px;'>";
                for (var i = 0; i < num; i++) {
                    a += dt[params.dataIndex].text + "<br>";
                }
                a += "</div>";
  
                return a;
            }
  
  
        },
        visualMap: {
			 show: false,     // //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
            min: 800,
            max: 50000,
            text:['High','Low'],
            x:'left',
            y:'center',
            realtime: false,
            calculable: true,
            inRange: {
                color: ['lightskyblue','yellow', 'orangered']
            }
        },
        toolbox:{
            show : true,
            orient : 'vertical',
            x: 'right',
            y: 'center',
            borderColor: '#FFF',       // 工具箱边框颜色
            borderWidth: 0,            // 工具箱边框线宽，单位px，默认为0（无边框）
            padding: 5,                // 工具箱内边距，单位px，默认各方向内边距为5，
            showTitle: false,
            feature : {
                saveAsImage: { show : true,
                    title : '保存为图片',
                    type : 'jpeg'
                },
                restore: {show: true},
            }
        },
        series: [{
            name: '长沙',
            type: 'map',
            map:'cs',
            // symbol:'../images/shine.jpg',
            //  symbolSize: 41,
            roam:true,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
  
            layoutCenter: ['50%', '50%'],   //属性定义地图中心在屏幕中的位置，一般结合layoutSize 定义地图的大小
//            layoutSize: 11200,
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data:dt
        }]
    };
    $.get('json/cs.json', function (csJson) {
        echarts.registerMap('cs', csJson);
        var chart = echarts.init(document.getElementById('map'));
        chart.setOption(option);
    });
</script>
</body>
</html>