vue3+echart散点图？

Question

vue3+echart散点图？

发布于
2023-11-08 四川

请问大佬们，当鼠标移动echarts散点图某个点的时候，当两个点数据重合了的时候，如何能够正确的将重合的点数据全部显示出来呢？
我通过tooltip下的formatter函数这样写的，但是显示出来的数据有错误？
图片.png
错误显示：

正确的显示应该是 BDS：5,81,33。GALILEO：5,81,33。
请大佬们指点指点，谢谢！！！

前端 typescript javascript vue3 echarts

阅读 706

AI BotBETA

首先，你需要确保你的 ECharts 配置正确。在散点图（scatter）中，当两个点数据重合时，ECharts 默认是不会进行特殊处理的。你需要通过修改 series 配置中的 itemStyle 来改变点的形状或大小，使其能够区分出重合的点。

至于 tooltip 的显示问题，你应该是在 formatter 函数中对数据的处理有误。你可能需要检查你的 formatter 函数，确保它能够正确地处理你的数据。

以下是一个基本的 ECharts 散点图配置示例：

option = {
    tooltip: {
        trigger: 'axis',
        formatter: function(params) {
            var res = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
                res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
            }
            return res;
        }
    },
    legend: {
        data:['A','B']
    },
    xAxis: {},
    yAxis: {},
    series: [{
        name: 'A',
        type: 'scatter',
        coordinateSystem: 'xy',
        data: [[1, 'A1'], [2, 'A2'], [3, 'A3']],
        symbolSize: 20, // 这里可以设置点的大小，防止重合
        itemStyle: {
            normal: {
                color: 'red', // 这里可以设置点的颜色，使其在视觉上有所区分
            }
        },
    }, {
        name: 'B',
        type: 'scatter',
        coordinateSystem: 'xy',
        data: [[1, 'B1'], [2, 'B2'], [3, 'B3']], // 请确保你的数据格式正确，比如这里的 'B1' 等字符串需要对应到实际的数值
    }]
};

这是一个基本的示例，你需要根据你的具体需求进行修改。例如，你可能需要调整点的颜色、大小，或者调整 tooltip 的显示格式等。如果你还有任何问题，欢迎继续提问。

1 个回答

得票最新

时倾

611138

发布于
2023-11-08 四川

✓ 已被采纳

formatter数据输出问题，再末尾加上
换行就OK

撰写回答