Open honghh2018 opened 2 months ago
5.2.2
The scatter show error
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
I want to plot the umap dimension scatter but the plot show weird.
how to solve this problem ?
- OS: - Browser: Chromo 127.0.6533.120 - Framework:
Best wish, hanhuihong
your code is fine - Demo, maybe a problem with some weird data...
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
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; }, {});
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
Any additional comments?
Best wish, hanhuihong