要为 ECharts 中的散点图配置特定的提示框,您可以使用 tooltip 配置项并通过回调函数实现自定义的提示内容。下面是一个简单的散点图配置示例,其中包括了自定义的提示框内容:
option = {
    title: {
        text: '散点图示例'
    },
    xAxis: {
        type: 'value',
        scale: true
    },
    yAxis: {
        type: 'value',
        scale: true
    },
    series: [
        {
            name: '散点图',
            type: 'scatter',
            data: [
                { value: [10, 20, 'A'] },
                { value: [20, 50, 'B'] },
                { value: [30, 70, 'C'] },
                { value: [40, 30, 'D'] },
                { value: [50, 40, 'E'] },
                // 更多数据点...
            ],
            symbolSize: 10,
            itemStyle: {
                color: 'blue'
            },
            label: {
                show: true,
                formatter: function (params) {
                    return params.value[2]; // 显示第三个维度的值('A', 'B', 'C', ...)
                },
                position: 'top'
            },
            emphasis: {
                label: {
                    show: true,
                    formatter: function (params) {
                        return params.value[2]; // 高亮状态下也显示第三个维度的值
                    }
                }
            }
        }
    ],
    tooltip: {
        show: true,
        formatter: function (params) {
            const data = params.value;
            return `X: ${data[0]}, Y: ${data[1]}, Category: ${data[2]}`;
        }
    }
};

在这个例子中,数据点的每个值是一个包含 x 轴、y 轴和第三个维度(在这里是一个字符串,表示类别)的数组。label 的 formatter 用于在标签上显示第三个维度的值,tooltip 的 formatter 用于在提示框中显示详细信息。

通过这种方式,您可以根据实际需求在散点图的提示框中显示特定的信息。


转载请注明出处:http://www.zyzy.cn/article/detail/5409/ECharts