Echarts在线免费图表

 
            var mapJson = '//img.isqqw.com/profile/upload/2024/05/13/01a195ce-d227-42d9-aa89-0b6de4ff58a7.json'
option = {
   backgroundColor: "#fff",
   tooltip: {
      show: true, // 提示框
      trigger: "item",
      formatter: function (params) {
         return params.name;
      },
   },
   geo3D: {
      show: true,
      map: "centerMap",
      left: "0%",
      roam: true,
      zoom: 2,
      regionHeight: 5,
      label: {
         show: true,
         distance: 0,
         // position: "inside",
         // padding: [6, 8],
         borderRadius: 0,
         distanca: 0,
         textStyle: {
            fontSize: 14,
            color: "#ff0000", // 地图初始化区域字体颜色
            borderWidth: 0,
            borderColor: '#000',
         }
      },
      itemStyle: {
         // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
         color: "#0a599f", // 地图板块的颜色
         opacity: 1, // 图形的不透明度 [ default: 1 ]
         borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
         borderColor: "#6AEBF5", // 图形描边的颜色。[ default: #333 ]
      },
      emphasis: {
         label: {
            show: true,
            color: "#fff000",
         },
         itemStyle: {
            color: "#ff0",
            opacity: 1,
         },
      },
      // shading: "color",
      light: {
         // 光照阴影
         main: {
            color: "#FFFFFF", // 光照颜色
            intensity: 2, // 光照强度
            shadowQuality: "light", // 阴影亮度
            shadow: true, // 是否显示阴影
            alpha: 50,
            beta: 10,
         },
         ambient: {
           color: "red",
           intensity: 0.4,
         },
      },
      regions: [],
      viewControl: {
         "projection": "perspective",
         "autoRotate": false,
         "autoRotateAfterStill": 3,
         "distance": 159.1931248935421,
         "alpha": 90,
         "beta": 0,
         "minAlpha": 90,
         "maxAlpha": 90,
         "minBeta": -100,
         "maxBeta": 100,
         "animation": true,
         "animationDurationUpdate": 1000,
         "animationEasingUpdate": "cubicInOut",
         "orthographicSize": 60,
         "autoRotateDirection": "cw",
         "autoRotateSpeed": 10,
         "damping": 0.8,
         "rotateSensitivity": 1,
         "zoomSensitivity": 1,
         "panSensitivity": 1,
         "panMouseButton": "middle",
         "rotateMouseButton": "left",
         "minDistance": 40,
         "maxDistance": 400,
         "maxOrthographicSize": 400,
         "minOrthographicSize": 20,
         "center": [
            0,
            0,
            0
         ]
      },
   },
   series: [{
		type: 'scatter3D',
		coordinateSystem: 'geo3D',
      // 使用svg图片作为标记点
      symbol:'path://M864 157.333333V725.333333a117.333333 117.333333 0 1 1-64-104.533333V376l-469.333333 37.546667V768a117.333333 117.333333 0 0 1-112.618667 117.248L213.333333 885.333333a117.333333 117.333333 0 1 1 53.333334-221.866666V205.12l597.333333-47.786667zM213.333333 714.666667a53.333333 53.333333 0 1 0 0 106.666666 53.333333 53.333333 0 0 0 0-106.666666z m533.333334-42.666667a53.333333 53.333333 0 1 0 0 106.666667 53.333333 53.333333 0 0 0 0-106.666667z m53.333333-445.333333l-469.333333 37.546666v85.12l469.333333-37.546666v-85.12z',
      // 使用气泡作为标记点
      // symbol: 'pin', 
		symbolSize: [30, 30],
		rippleEffect: {
			//坐标点动画
			period: 3,
			scale: 5,
			brushType: 'fill'
		},
      label: {
         normal: {
            show: true,
            position: 'right',
            formatter: '{b}',
            color: '#f99',
            fontWeight: "bold",
            fontSize: 18
         }
      },
		data: [{
				name: "高台西关汽车站",
				value: [99.815230,39.383132],
				itemStyle: {
					normal: {
						color: 'red'
					}
				},
			},
			{
				name: "骆驼城遗址",
				value: [99.589666,39.362048],
				itemStyle: {
					normal: {
						color: 'blue'
					}
				},
			},
			{
				name: "张掖机场",
				value: [	100.705864,38.811815],
				itemStyle: {
					normal: {
						color: 'black'
					}
				},
			}
		]
	}]
}

myChart.showLoading();


$.getJSON(mapJson, function (geoJson) {
   echarts.registerMap('centerMap', geoJson);
   myChart.hideLoading();
   myChart.setOption(option);
});