百度echarts做一个3d地图+柱状图（动态旋转）

如何利用百度echarts做一个3d地图，在地图上加上柱状图，并且动态旋转，下面web建站小编给大家详细介绍一下！

1、引入2个js

echarts.min.js
echarts-gl.min.js

2、3d地图+3d柱状图代码

var uploadedDataURL = 'map/map.json'; //引入地图json

function cityMap(type, mapData) {
  var myChart = echarts.init(document.getElementById('map'));
  $.get(uploadedDataURL, function(as) {
  	echarts.registerMap('wenzhou', as);
  	option = {
  	  geo3D: {
  	  	map: 'wenzhou',
  	  	viewControl: {
  	  	  center: [-10, 0, 10],
  	  	  autoRotate: true
  	  	},
  	  	light: {
  	  	  main: {
  	  	    intensity: 1,
  	  	    shadow: true,
  	  	    alpha: 120,
  	  	    beta: 80
  	  	  },
  	  	},
  	  	environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  	  	  offset: 0,
  	  	  color: 'black' // 天空颜色           
  	  	}, {
  	  	  offset: 0.7,
  	  	  color: 'black' // 地面颜色
  	  	}, {
  	  	  offset: 1,
  	  	  color: 'black' // 地面颜色
  	  	}], false),
  	  	itemStyle: {
  	  	  borderColor: 'rgb(62,215,213)',
  	  	  areaColor: '#4490fc',
  	  	  borderWidth: 1
  	  	},
  	  },
  	  series: [{
  	  	type: 'bar3D',
  	  	coordinateSystem: 'geo3D',
  	  	bevelSize: 0,
  	  	tooltip: { //提示框的内容
  	  	  formatter: function(data) {
  	  	  	return 'name:' + data.name + ' ' + 'value:' + data.value[2];
  	  	  }
  	  	},
  	  	label: {
  	  	  show: true,
  	  	  formatter: '{b}',
  	  	  position: 'top',
  	  	  textStyle: {
  	  	  	color: '#000',
  	  	  	backgroundColor: '#fff',
  	  	  }
  	  	},
  	  	shading: 'lambert',
  	  	data: [{
  	  	  	"name": "永嘉县",
  	  	  	"value": [
  	  	  		120.690968, 28.153886,
  	  	  		100
  	  	  	],
  	  	  	itemStyle: {
  	  	  		color: '#17e3ff',
  	  	  		opacity: 1
  	  	  	},
  	  	  },
  	  	  {
  	  	  	"name": "鹿城区",
  	  	  	"value": [
  	  	  		120.674231, 28.003352,
  	  	  		100,
  	  	  	],
  	  	  	itemStyle: {
  	  	  		color: '#fffe00',
  	  	  		opacity: 1
  	  	  	},
  	  	  },
  	  	  {
  	  	  	"name": "乐清市",
  	  	  	"value": [
  	  	  		120.967147, 28.116083,
  	  	  		100,
  	  	  	],
  	  	  	itemStyle: {
  	  	  		color: '#18d0ff',
  	  	  		opacity: 1
  	  	  	},
  	  	  },
  	  	  {
  	  	  	"name": "泰顺县",
  	  	  	"value": [
  	  	  		119.71624, 27.557309,
  	  	  		100,
  	  	  	],
  	  	  	itemStyle: {
  	  	  		color: '#e94971',
  	  	  		opacity: 1
  	  	  	},
  	  	  },
  	  	  {
  	  	  	"name": "平阳县",
  	  	  	"value": [
  	  	  		120.564387, 27.6693,
  	  	  		100,
  	  	  	],
  	  	  	itemStyle: {
  	  	  		color: '#634fd4',
  	  	  		opacity: 1
  	  	  	},
  	  	  },
  	  	],
  	  }]
  	};
  	myChart.setOption(option);
  
  });
}

NB Map官网：一款免费在线三维地图生成和下载工具

TopoExport官网：一键下载全球任意地点的2D和3D地图

百度echarts雷达图radar根据分数点显示每个不同颜色

百度ECharts文档官网介绍

百度echarts柱状图设置不同颜色（每根柱子一种颜色）

标签： 3d地图, 3d柱状图, 百度echarts

上面是“百度echarts做一个3d地图+柱状图（动态旋转）”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2882.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！