echarts
echarts copied to clipboard
[Bug] heatmap--The graph will flash when the amount of data is too large
Version
5.3.3
Link to Minimal Reproduction
No response
Steps to Reproduce
option = { title: { text: '时频分析', left:"left", textStyle:{ fontSize:'14', color:'#454545', fontWeight:600, } }, grid: { top: 60, right: 80, bottom: 45, left: 70 }, tooltip: { appendToBody: true, valueFormatter: (value) => parseFloat(value).toFixed(4)+'Hz', }, dataZoom: [ { type: 'slider', xAxisIndex: 0, handleSize: "10px", bottom:10, height: 15, //组件高度 filterMode: 'empty' }, { type: 'slider', yAxisIndex: 0, handleSize: "10px", right:60, width: 15, //组件高度 filterMode: 'empty' }, { type: 'inside', xAxisIndex: 0, handleSize: "10px", height: 15, //组件高度 filterMode: 'empty' }, { type: 'inside', yAxisIndex: 0, handleSize: "10px", width: 15, //组件高度 filterMode: 'empty' } ], xAxis: { type: "category", data:[], nameLocation: "center", nameGap: 25, nameRotate: 0, /改变y轴颜色/ axisLine: { lineStyle: { color: "#1982ff", width: 1 //这里是为了突出显示加上的 } }, axisLabel: { //字体颜色 show: true, textStyle: { color: "#ff0536" } }, nameTextStyle: { fontSize: 13, color: "#1892ff" }, boundaryGap: [0, 0.01], splitLine: { show: false } }, color: ["#2ca9e1"], yAxis: { name:"频率/Hz", type:'value',
// nameLocation: "center",
// nameGap: 60,
splitLine: {
show: false
},
/*改变y轴颜色*/
axisLine: {
lineStyle: {
color: "#1982ff",
width: 1 //这里是为了突出显示加上的
}
},
axisLabel: {
//字体颜色
show: true,
textStyle: {
color: "#ff0536"
}
},
nameTextStyle: {
fontSize: 13,
fontWeight: 400,
color: "#1892ff"
},
type: "category",
data:[]
},
visualMap: {
min: 0,
max: 0.1,
// calculable: true,
// realtime: false,
text:['1','0'],
top:40,
right:10,
// bottom:80,
itemHeight:100,
inRange: {
color: [
'#313695',
'#4575b4',
'#74add1',
'#abd9e9',
'#e0f3f8',
'#ffffbf',
'#fee090',
'#fdae61',
'#f46d43',
'#d73027',
'#a50026'
]
}
},
series: [
{
type: "heatmap",
smooth: false,
data:[],
emphasis: {
itemStyle: {
borderColor: '#333',
borderWidth: 1
}
},
progressive: 1000,
animation: false
}
]
}
Sample data = [["2022-07-01 00:00:00", "0", "6.5875E-19"], ["2022-07-01 00:00:00", "0.0045776", "0.0019867"],…]
When the amount of data exceeds 30000, it will flash
Current Behavior
。。。
Expected Behavior
。。
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
It isn't "flash" but progressive rendering. You can set progressive
as 0
to disable it.