首页echarts geo3D 使用tooltip

echarts geo3D 使用tooltip

时间: 2025-02-11 14:23:28 浏览: 15

ECharts Geo3D Tooltip 使用方法

在ECharts Geo3D中配置tooltip可以显著提升用户体验，使用户能够更直观地获取地理坐标上的数据信息。通过设置tooltip属性，可以在鼠标悬停时显示自定义提示框。

基础配置项

trigger: 设置触发类型，默认为item, 即图形元素触发；也可以设成axis轴触发模式，在Geo3D场景下通常保持默认即可。
formatter: 自定义提示框内容格式化函数或字符串模板，支持HTML标签，允许灵活定制展示样式和逻辑[^1]。

option = {
    geo3D: {
        map: 'world',
        roam: true,
        itemStyle: {
            areaColor: '#eee'
        }
    },
    tooltip: { // 配置全局tooltip行为
        trigger: 'item', 
        formatter: function (params) {
            return `${params.name}<br/>Value:${params.value}`;
        }
    },
};

对于具体的地理位置点或者区域，还可以单独为其指定特定的tooltip参数，这使得每个位置的数据呈现更加个性化：

series: [{
    type: 'scatter3D',
    coordinateSystem: 'geo3D',
    data: [
      [116.4, 39.9, 10], // 经纬度及数值
      ...
    ],
    label: {
        show: false
    },
    emphasis: {
        label: {
            show: true
        }
    },
    tooltip: { // 可覆盖全局配置
        backgroundColor: 'rgba(255,255,255,0.7)',
        borderColor: '#ccc',
        borderWidth: 1,
        padding: 10,
        textStyle: {
            color: '#333'
        },
        enterable: true,
        extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'        
    }    
}]