echarts [Bug] the plot the scatter show very large x and y axis value

g6baxovj  于 5个月前  发布在  Echarts
关注(0)|答案(2)|浏览(124)

Version

5.2.2

The scatter show error

Steps to Reproduce

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var data = [{'barcode': 'AM3G459_AAACCCAAGCTAGTTC-1', 'value': [-3.36280719833069, 2.09605242976504], 'cluster': '0'}, {'barcode': 'AM3G459_AAACCCAAGTGTACAA-1', 'value': [-7.34648434714966, 4.56429269084292], 'cluster': '3'}, {'barcode': 'AM3G459_AAACCCACACGTATAC-1', 'value': [11.0504473011047, 8.39798333415347], 'cluster': '1'}, {'barcode': 'AM3G459_AAACCCAGTTGCTCGG-1', 'value': [5.58813078804321, -8.26093695393247], 'cluster': '2'}, {'barcode': 'AM3G459_AAACCCATCAGCGCAC-1', 'value': [1.76149137420959, -10.1491482042376], 'cluster': '2'}, {'barcode': 'AM3G459_AAACCCATCGAAGAAT-1', 'value': [-7.73223464088135, 2.06008937129336], 'cluster': '0'}, {'barcode': 'AM3G459_AAACCCATCGACGACC-1', 'value': [-4.64676968650513, 1.09112717875796], 'cluster': '0'},...]
the data had 1000 element.
var groupedData = data.reduce((acc, item) => {
if (!acc[item.group]) {
acc[item.group] = [];
}
acc[item.group].push(item.value);
return acc;
}, {});

var series = Object.keys(groupedData).map(group => ({
    name: group,
    type: 'scatter',
    symbolSize: 2,
    data: groupedData[group]
}));

option = {
    title: {
        text: 'umap绘图'
    },
    brush: {
        toolbox: ['rect', 'polygon', 'keep', 'clear'],
        xAxisIndex: 'all',
        brushLink: 'all',
        outOfBrush: {
            colorAlpha: 0.1
        }
    },
    legend: {
        right: '0', // 将图例放在右侧
        top: "10%",
        orient: 'vertical', // 垂直排列图例
        data: Object.keys(groupedData)
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return 'Group: ' + params.seriesName + '<br/>Value: ' + params.data;
        }
    },
    xAxis: {

        name: "UMAP1",
        nameLocation: 'middle', // 设置名称位置
        nameTextStyle: {
            fontSize: 14,
            padding: 10 // 设置名称和轴线之间的距离
        },
        // min: -15, //自动计算出来
        // max: 15
        position: 'bottom',
        axisLine: {
            onZero: false,
            lineStyle: {
                color: '#000'
            }
        },
        axisTick: {
            alignWithLabel: true
        }

    },
    yAxis: {
        name: 'UMAP 2', // 设置纵轴名称
        nameLocation: 'middle', // 设置名称位置
        // nameRotate: 90, // 旋转名称
        nameTextStyle: {
            fontSize: 14,
            padding: 10 // 设置名称和轴线之间的距离
        },
        // min:-15, 自动计算出来
        // max:50,
        position: 'left',
        axisLine: {
            onZero: false, // x轴不与y轴交叉
            lineStyle: {
                color: '#000'
            },
            axisTick: {
                alignWithLabel: true
            }
        }
    },

    series: series,
    graphic: {
        type: 'text',
        left: 'center',
        top: '5%', // 调整这个值来改变文本的位置
        style: {
            text: 'CD79A',
            fontSize: 20,
            fontWeight: 'bold',
            fill: '#333'
        }
    }
};

option && myChart.setOption(option);
the  plot showing below:

why the x and y axis value had very large number, my scatter just between -30 and 30

Current Behavior

I want to plot the umap dimension scatter but the plot show weird.

Expected Behavior

how to solve this problem ?

Environment

- OS:
- Browser: Chromo 127.0.6533.120
- Framework:

Any additional comments?

Best wish,
hanhuihong

2eafrhcq

2eafrhcq1#

your code is fine - Demo , maybe a problem with some weird data...

fslejnso

fslejnso2#

Thanks the urge reply, i found the outlier in my coordinator value
[76103599831393,2.13341119059878]
I would be checked this error in my data soon
Best

相关问题