bar3D和球体之间有道不可跨越的鸿沟
配置项如下
/**
* globe上绘制bar3d,近看会有悬浮感,如何去除?
*/
const uploadedDataURL = "/asset/get/s/data-1517645039291-B1vgpymUz.json"; // http://gallery.echartsjs.com/editor.html?c=xB1COCy7UM
const canvas = document.createElement('canvas');
const baseChart = echarts.init(canvas, null, {
width: 4096, height: 2048
});
$.getJSON(uploadedDataURL, function(geoJson) {
echarts.registerMap('cn', geoJson);
baseChart.setOption({
geo : {
map: 'cn',
top: 0,
left: 0,
right: 0,
bottom: 0,
boundingCoords: [[-180, 90], [180, -90]],
itemStyle: {
areaColor: '#666',
},
},
});
const regions = baseChart.getModel().getComponent('geo').coordinateSystem.regions;
const data = regions.map(each => {
return {
name: each.name,
value: each.center.concat(Math.random()),
};
});
option = {
globe: {
baseTexture: baseChart,
globeOuterRadius: 110, // 控制bar高度
shading: 'realistic',
realisticMaterial: {
roughness: 0.8,
metalness: 0
},
light: {
main: {
intensity: 2,
shadow: true,
},
ambient: {
intensity: 0.4,
},
},
postEffect: {
enable: true,
bloom: {
enable: true,
bloomIntensity: 0.5,
},
},
viewControl: {
// targetCoord: [111, 31],
center: [0, 80, 0],
distance: 50,
autoRotate: false,
alpha: -18,
beta: 195,
}
},
series: [{
type: 'bar3D',
coordinateSystem: 'globe',
bevelSize: 0.4,
bevelSmoothness: 4,
barSize: 1,
minHeight: 1,
shading: 'realistic',
itemStyle: {
color: 'orange',
},
label: {
show: true,
formatter: '{b}',
distance: 0,
},
data,
}]
};
myChart.setOption(option); // 需要手动设置一次
});