百度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);
  
  });
}

本文链接：http://so.lmcjl.com/news/23628/