apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.27k stars 19.61k forks source link

[Bug] 3d柱状图高度不正常显示 #20309

Open yuanyuanyuankong opened 1 month ago

yuanyuanyuankong commented 1 month ago

Version

e.g. 5.5.1

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=bar3d-global-population&gl=1

Steps to Reproduce

import * as echarts from 'echarts'; import 'echarts-gl';

var ROOT_PATH = 'https://echarts.apache.org/examples';

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

$.getJSON(ROOT_PATH + '/data-gl/asset/data/population.json', function (data) { data = [ [1, 1, 9], [8, 8, 9], [15, 15, 12] ]; myChart.setOption({ backgroundColor: '#cdcfd5', geo3D: { map: 'world', shading: 'lambert', light: { main: { intensity: 5, shadow: true, shadowQuality: 'high', alpha: 30 }, ambient: { intensity: 0 }, ambientCubemap: { texture: 'data-gl/asset/canyon.hdr', exposure: 1, diffuseIntensity: 0.5 } }, viewControl: { distance: 50, panMouseButton: 'left', rotateMouseButton: 'right' }, groundPlane: { show: true, color: 'https://github.com/apache/echarts/issues/999' }, postEffect: { enable: true, bloom: { enable: false }, SSAO: { radius: 1, intensity: 1, enable: true }, depthOfField: { enable: false, focalRange: 10, blurRadius: 10, fstop: 1 } }, temporalSuperSampling: { enable: true }, itemStyle: {}, regionHeight: 2 }, visualMap: { max: 40, calculable: true, realtime: false, inRange: { color: [ '#00ff00', '#00ff00', '#00ff00', '#00ff00', '#00ff00', '#00ff00', '#00ff00', '#00ff00', '#00ff00', '#00ff00', '#00ff00' ] }, outOfRange: { colorAlpha: 0 } }, series: [ { type: 'bar3D', coordinateSystem: 'geo3D', shading: 'lambert', data: data, barSize: 0.5, minHeight: 0.2, silent: true, itemStyle: { color: 'black' // opacity: 0.8 } } ] }); });

option && myChart.setOption(option); 用户交互:我修改data数组,将柱状图的高度重新设置,发现当最小高度不为0时圆柱显示高度会被强制更改为0,然后鼠标在指向地图时其地图标签位置会下移

Current Behavior

1724915805993 需要显示柱状图的高度,发现其中高度数值较小的数显示高度为0,或者高度数值较大的数显示高度置顶 ,尽管我提供的数值并没有这么极端。然后地图的标签名字会下调

Expected Behavior

我希望在高度数值可以根据传入的数字正常显示,如我为其设定的空间高度为10. 传入的柱状图高度分别为 2,3,5时,其画面的显示分别为2/10,3/10,5/10.另外我希望地图的标签坐标与圆柱的高度进行区分,不要因为圆柱而影响地图本身的标签

Environment

- OS:windows10
- Browser:
Microsoft Edge
版本 128.0.2739.42 (正式版本) (64 位)
- Framework:vue3

Any additional comments?

No response

echarts-bot[bot] commented 1 month ago

@yuanyuanyuankong It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED
**TITLE** [Bug] The height of the 3D histogram is not displayed properly
yuanyuanyuankong commented 1 month ago

我希望其设定的空间高度为10。传入2,3,5时,将最大值(5)高度设定为空间高度最大值,其余高度数值按此比例分配。不要将最小值(2)高度设置为0

helgasoft commented 1 month ago

duplicate of #432 Workaround is to add a dummy bar with min height - Demo globe-layers