echarts icon indicating copy to clipboard operation
echarts copied to clipboard

[Bug] heatmap--The graph will flash when the amount of data is too large

Open 958627869 opened this issue 2 years ago • 1 comments

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

958627869 avatar Aug 02 '22 11:08 958627869

It isn't "flash" but progressive rendering. You can set progressive as 0 to disable it.

plainheart avatar Aug 02 '22 12:08 plainheart