echarts3D地图+3D柱状图+3D飞线图-Toy模板网

这篇具有很好参考价值的文章主要介绍了echarts3D地图+3D柱状图+3D飞线图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

echarts版本：5.4.0

echarts-gl版本：2.0.8

示例代码：

<template>
	<div>
		<div ref="chinaMap" id="chinaMap" style="width: 90vw;height: 90vh;"></div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import 'echarts-gl';
	import xianData from '../assets/xian.json';
	export default {
		mounted() {
			this.initMap();
		},
		methods: {
			initMap(name) {
				echarts.registerMap('xian', xianData); // 注册矢量地图数据
				let map = echarts.init(this.$refs.chinaMap);
				let option = {
					title: {
						text: '测试3D',
						textStyle: {
							color: '#000',
							fontSize: 18,
						},
					},
					geo3D: {
						map: 'xian',
						itemStyle: {
							color: '#abeee0',
							opacity: 1,
							borderWidth: 1,
							borderColor: '#ddd',
						},
						viewControl: {
							beta: 0, //x轴旋转
							rotateSensitivity: 0, // 无法旋转
							// panMouseButton:'left', // 平移
							// panSensitivity:1,
						},
						label: {
							show: false,
							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(0,170,0,1)',
									fontSize: 14,
								}
							},
							itemStyle: {
								color: '#60ff0b',
								opacity: 1,
							},
							data: [{
									name: '新城区',
									value: [108.979903, 34.27927, 100],
								},
								{
									name: '碑林区',
									value: [108.946994, 34.251061, 400],
								},
								{
									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, 100],
								},
								{
									name: '合计',
									value: [108.8, 33.999, 2800],
									itemStyle:{
										color:'#ffd100',
										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]],
							],
						}
					],
				};
				map.setOption(option, true);
			},
		},
	};
</script>
</script>

<style scoped>
</style>