echart 广州3d_ECharts3D地图(详细示例——附有具体注释)

3D地图图表效果如下:

具体代码如下：

铜仁市3D地图(点击地图区域跳转到相应页面)

// 初始化图表

var myChart = echarts.init(document.getElementById('main'));

// JSON文件(地图数据)路径

var uploadedDataURL = "json/522200.json";

// 显示加载动画效果,可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画。

myChart.showLoading();

// 引入JSON文件

$.getJSON(uploadedDataURL, function(geoJson) {

// 注册地图名字(tongren)和数据(geoJson)

echarts.registerMap('tongren', geoJson);

// 隐藏动画加载效果。

myChart.hideLoading();

// 图表配置项

var option = {

title : {// 标题

top : '5%',

text : '铜仁市3D地图',

subtext : '',

x : 'center',

textStyle : {

color : '#ccc'

}

},

tooltip : {// 提示框

trigger : 'item',

formatter : function(params) {

return params.name;

}

},

series: [{

type: 'map3D', // 系列类型

name: 'map3D', // 系列名称

map: 'tongren', // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同(ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。)

// 环境贴图，支持純颜色值，渐变色，全景贴图的 url。默认为 'auto'，在配置有 light.ambientCubemap.texture 的时候会使用该纹理作为环境贴图。否则则不显示环境贴图。

environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 配置为垂直渐变的背景

offset: 0, color: '#00aaff' // 天空颜色

}, {

offset: 0.7, color: '#998866' // 地面颜色

}, {

offset: 1, color: '#998866' // 地面颜色

}], false),

label: { // 标签的相关设置

show: true, // (地图上的城市名称)是否显示标签 [ default: false ]

//distance: 50, // 标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离

//formatter:, // 标签内容格式器</