Version
5.2.2
Link to Minimal Reproduction
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
2条答案
按热度按时间2eafrhcq1#
your code is fine - Demo , maybe a problem with some weird data...
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