echarts
echarts copied to clipboard
apache
[Bug] realtime sort of bar chart will sort randomly for data that exceeds [min,max].
Version
5.4.3
Link to Minimal Reproduction
https://cdn.staticfile.org/echarts/5.4.3/echarts.js
Steps to Reproduce
var chartDom = document.getElementById('tmgraph');
chartDom.style.display="block";
chartDom.style.width='100%';
//chartDom.style.height='2500px';
var m_file=document.getElementById('mfile').innerHTML;
var m_x=document.getElementById('mx').innerHTML;
var m_y=document.getElementById('my').innerHTML;
var m_cnt=document.getElementById('cnt').innerHTML;
len=Math.floor((m_cnt/90)*2500);
chartDom.style.height=len+'px';
function shuffle(arr) {
return arr.sort(() => Math.random() - 0.5);
}
var l_colors=['#ffb6c1','#ffc0cb','#dc143c','#fff0f5','#db7093','#ff69b4','#ff1493','#c7158
5','#da70d6','#d8bfd8','#dda0dd','#ee82ee','#ff00ff','#ff00ff','#8b008b','#800080','#ba55d3','#9400d3','#99
32cc','#4b0082','#8a2be2','#9370db','#7b68ee','#6a5acd','#483d8b','#e6e6fa','#f8f8ff','#0000ff','#0000cd','
#191970','#00008b','#000080','#4169e1','#6495ed','#b0c4de','#778899','#708090','#1e90ff','#f0f8ff','#4682b4
','#87cefa','#87ceeb','#00bfff','#add8e6','#b0e0e6','#5f9ea0','#f0ffff','#e1ffff','#afeeee','#00ffff','#00f
fff','#00ced1','#2f4f4f','#008b8b','#008080','#48d1cc','#20b2aa','#40e0d0','#7fffaa','#00fa9a','#f5fffa','#
00ff7f','#3cb371','#2e8b57','#f0fff0','#90ee90','#98fb98','#8fbc8f','#32cd32','#00ff00','#228b22','#008000'
,'#006400','#7fff00','#7cfc00','#adff2f','#556b2f','#6b8e23','#fafad2','#fffff0','#ffffe0','#ffff00','#8080
00','#bdb76b','#fffacd','#eee8aa','#f0e68c','#ffd700','#fff8dc','#daa520','#fffaf0','#fdf5e6','#f5deb3','#f
fe4b5','#ffa500','#ffefd5','#ffebcd','#ffdead','#faebd7','#d2b48c','#deb887','#ffe4c4','#ff8c00','#faf0e6',
'#cd853f','#ffdab9','#f4a460','#d2691e','#8b4513','#fff5ee','#a0522d','#ffa07a','#ff7f50','#ff4500','#e9967
a','#ff6347','#ffe4e1','#fa8072','#fffafa','#f08080','#bc8f8f','#cd5c5c','#ff0000','#a52a2a','#b22222','#8b
0000','#800000','#f5f5f5','#dcdcdc','#d3d3d3','#c0c0c0','#a9a9a9','#808080','#696969','#000000'];
l_colors=shuffle(l_colors);
var myChart = echarts.init(chartDom);
var option;
const updateFrequency = 6000;
const dimension = 0;
myChart.showLoading();
$.when($.get('my_urls',function( d ){
} )).done(function (data) {
myChart.hideLoading();
const flags = '';
const years = [];
var colorm=new Map();
var c_idx=Math.floor(Math.random() * 10)%l_colors.length;
for (let i = 0; i < data.length; ++i) {
if (years.length === 0 || years[years.length - 1] !== data[i][4]) {
years.push(data[i][4]);
}
if(colorm.has(data[i][3])==false){
colorm[data[i][3]]=l_colors[c_idx];
c_idx=(c_idx+1)%l_colors.length;
}
}
function getFlag(countryName) {
return '';
}
let startIndex = 1;
let startYear = years[startIndex];
option = {
grid: {
top: 10,
bottom: 30,
left: 150,
right: 80
},
xAxis: {
max:function (value){
if(value.max>m_x){
return m_x;
}
return value.max;
},
min:function (value) {
if(value.min< m_y){
return m_y;
}
return value.min;
},
axisLabel: {
formatter: function (n) {
return n+'%';
}
}
},
dataset: {
source: data.slice(1).filter(function (d) {
return d[4] === startYear;
})
},
yAxis: {
type: 'category',
inverse: true,
//max: function (value) {
// return value.max;
// },
axisLabel: {
show: true,
fontSize: 10,
formatter: function (value) {
return value;
},
rich: {
flag: {
fontSize: 25
}
}
},
animationDuration: 300,
animationDurationUpdate: 300
},
series: [
{
realtimeSort: true,
seriesLayoutBy: 'column',
type: 'bar',
itemStyle: {
color: function (param) {
return colorm[param.value[3]] || '#5470c6';
//return '#5470c6';
}
},
encode: {
x: dimension,
y: 3
},
label: {
show: true,
precision: 1,
position: 'insideLeft',
valueAnimation: true,
fontFamily: 'monospace',
formatter:function(val){
return '7天:'+val.data[2].toFixed(2)+'%,15天:'+val.data[1]
.toFixed(2)+'%,30天:'+val.data[0].toFixed(2)+'%';
}
}
}
],
// Disable init animation.
animationDuration: 0,
animationDurationUpdate: updateFrequency,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
graphic: {
elements: [
{
type: 'text',
right: 160,
top: 100,
style: {
text: startYear,
font: 'bolder 80px monospace',
fill: 'rgba(100, 100, 100, 0.25)'
},
z: 100
}
]
}
};
// console.log(option);
myChart.setOption(option);
for (let i = startIndex; i < years.length - 1; ++i) {
(function (i) {
setTimeout(function () {
updateYear(years[i + 1]);
}, (i - startIndex) * updateFrequency);
})(i);
}
function updateYear(year) {
let source = data.slice(1).filter(function (d) {
return d[4] === year;
});
option.series[0].data = source;
option.graphic.elements[0].style.text = year;
myChart.setOption(option);
}
});
option && myChart.setOption(option);
});
}
Current Behavior
option = {
xAxis: {
max:function (value){
if(value.max>0.5){
return m_x;
}
return value.max;
}
}
while x value >0.5， heigth of bar is 0.5，and it use 0.5 to sort ，and sort result is wrong. it should use true value of x
Expected Behavior
echarts.js：44469
44469 var orderMapping_1 = function (idx) {
44470 var el = data.getItemGraphicEl(idx);
44471 if(option.use_true_value==1){ // add some code here
44472 var v = data._store._chunks[0][idx]; // add some code here
44473 return v; // add some code here
44474 } // add some code here
44475 var shape = el && el.shape;
44476 return shape && // The result should be consistent with the initial sort by data value.
44477 // Do not support the case that both positive and negative exist.
44478 Math.abs(baseAxis.isHorizontal() ? shape.height : shape.width) // If data is NaN, shape .xxx may be NaN, so use || 0 here in case
44479 || 0;
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
series.realtimeSort 加一个属性，use_true_value:1 ，使用原始真值来排序。
@liuweijiaCHN It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
TRANSLATED
TITLE
[Bug] The dynamic sorting graph of bar will sort the data randomly when the value exceeds max or min
![echarts-bot[bot] avatar](https://avatars.githubusercontent.com/in/20872?v=4 "Published by a pub.dev verified publisher"){kind=small}
thank you very much. I will follow this issue and see your reply frequently.
How can I use https://cdn_host/5.4.3/echart.js and modify its function by using 'extend'/override or 'modify its source js file'. because cdn file is downloaded very fast. so I can solve the problem quickly and downloading of web page is also quickly
var chartDom = document.getElementById('tmgraph');
echarts.extendChartView() ????? // extend echarts. BarView.prototype._enableRealtimeSort , modify the orderMapping_1 function ??
var myChart = echarts.init(chartDom); // then init it