使用 heatmap 模拟伪彩图的时候，网格之间避免有白色间隙

[forzkgd]

One-line summary [问题简述]

使用 heatmap 模拟伪彩图的时候，网格之间有白色间隙

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]:4.0.2
• Browser version [浏览器类型和版本]:chrome 65.0.3325.181
• OS Version [操作系统类型和版本]: win 10

Expected behaviour [期望结果]

网格之间能不能连续起来？不要有那么明显的白色间隙~

ECharts option [ECharts配置项]

option = {
tooltip: {
                    extraCssText: "font-size:12px;background:rgba(0,0,0,0.8);border-radius:12;box-shadow:2px 3px 9px 0px rgba(184, 182, 182, 0.8);border-radius:4px;padding:8px;line-height:1.5",
                    formatter: function (params) {

                        // console.log(params)

                        return ("<p style='margin-bottom:6px;'>" +
                            String(params.value[0]).replace(/-/g, "/") +
                            "</p>" +
                            params.marker +
                            (params.data[1]) +
                            "nm<b style='margin-left:4px;'>" +
                            (Number(params.data[2]).toFixed(2)) +
                            "(个/cm³)</b>"
                        );
                    }
                },
                grid: {
                    // height:"70%"
                    bottom: "80",
                },
                toolbox: {
                    feature: {
                        saveAsImage: { show: true }
                    }
                },
                xAxis: {
                    // axisPointer:{
                    //     show:true,
                    //     type:"line"
                    // },
                    type: 'category',
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        color: axisColors.labelColor,
                        formatter: function (value, index) {
                            return value.split(" ")[1] + "\n" + value.split(" ")[0].replace(/-/g, "/")
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: axisColors.light.axis
                        }
                    },
                },
                yAxis: {

                    name: "粒径Dp(nm)",
                    // nameLocation: "middle",
                    type: 'category',

                    // logBase: 10,//默认就是 10
                    nameTextStyle: {
                        color: axisColors.labelColor,
                    },
                    axisLabel: {
                        color: axisColors.labelColor,
                         
                    },

                    axisLine: {
                        lineStyle: {
                            color: axisColors.light.axis
                        }
                    },

                },
                visualMap: {
                    type: 'continuous',
                    textGap: 20,
                    // textStyle:{
                    //     color:"red"
                    // },
                    text: ['dN/dLogDp\n(个/cm³)', ''],
                    realtime: false,
                    itemHeight: 200,
                    // itemWidth: 20,
                    align: 'left',
                    top: 'middle',
                    // left: 'right',
                    right: '3%',
                    calculable: true,
                    min: 0,
                    max: maxV,
                    calculable: true,
                    realtime: true,
                    inRange: {
                        color: colorx,//['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    }
                },
                dataZoom: [
                    {
                        bottom: "10",
                        // xAxisIndex: [0, 1],
                        // show: true,
                        type: 'slider',
                        // y: '90%',
                        filterMode: "filter",
                        start: 0,
                        end: 23,
                        minSpan: 10,
                    }
                ],
                series: [{
                    name: '伪彩图',
                    type: 'heatmap',
                    data: psdColorData,
                    // itemStyle: {
                    //     emphasis: {
                    //         borderColor: '#333',
                    //         borderWidth: 1
                    //     }
                    // },
                    emphasis: {
                        itemStyle: {
                            color: "rgba(0,0,0,0.4)",
                            // shadowColor: 'rgba(0, 0, 0, 0.4)',
                            // shadowBlur: 5
                            // opacity:1
                            // borderColor: '#fff',
                            // borderWidth: 1
                        }
                    },
                    progressive: 1000,
                    animation: false
                }]
}

Other comments [其他信息]

下图是 echarts 效果
echarts 效果

下面是highcharts 效果
highcharts 效果

[ooiuv]

我也有这个问题，，，看到别人发的borderWidth:'0'，但是设置的时候，没有生效！

[maucm92]

Hi. Did you find a solution? I have a graph with a dark background and 1024 points on the y-axis for each division of the x-axis (is a spectrogram) and the color of each point on the graph goes darkens, compared to the points of graphs generated with other libraries. I want to use eCharts heatmap.

[ooiuv]

Hi. Did you find a solution? I have a graph with a dark background and 1024 points on the y-axis for each division of the x-axis (is a spectrogram) and the color of each point on the graph goes darkens, compared to the points of graphs generated with other libraries. I want to use eCharts heatmap.

Sorry, I haven't logged into the account for a long time and didn't see your question in time. The problem of white edge is an official rendering problem, which has not been fixed. We can use hcharts rendering to solve this problem.

[pissang]

Hi, 4.6.0 has fixed the seam in #11689. It will be released soon.

[ooiuv]

ok! Yi Shen <[email protected]> 于2019年12月26日周四 下午11:16写道：

…

Hi, 4.6.0 has fixed the seam. It will be released soon. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#8122>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AELTHY7MQM4MUPBKML3VW5LQ2TDGTANCNFSM4EZPXX6A> .

[AFurryBear]

Im currently using version 4.6.0 , but still got the problem. in my case, if the opacity for visualmap is 1, everything is okay. but problem occured when opacity<1.
I attached the pic, and my environment setting as following
ECharts version [ECharts 版本]:4.6.0
Browser version [浏览器类型和版本]:版本 80.0.3987.87
OS Version [操作系统类型和版本]: win 10

[github-actions]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!