echarts日历热力图鼠标悬停展示自定义内容

作者：cndz 围观群众：657 更新于 2023-08-14 23:33:02 标签：layuiecharts热力图echarts悬停效果

简介

echarts官网给出的示例中，鼠标悬停如图所示，只显示一个数量，对于是哪天的数据不是很明了。就想着如果鼠标悬停可以显示日期就好了。
想要的效果

实现方法

设置tooltip

  tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        console.log(params)
                        return params.marker + '<br>' + '日期:' + params.data[0] + '<br>数量:' + params.data[1];
                    }
                },

完整option实例

 reliOption = {
                title: {
                    top: 30,
                    left: 'center',
                    text: '访问量热力图'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        console.log(params)
                        return params.marker + '<br>' + '日期:' + params.data[0] + '<br>数量:' + params.data[1];
                    }
                },
                visualMap: {
                    min: 1,
                    max: max,
                    type: 'piecewise',
                    orient: 'horizontal',
                    left: 'center',
                    top: 65
                },
                calendar: {
                    top: 120,
                    left: 30,
                    right: 30,
                    cellSize: ['auto', 13],
                    range: reliDate,
                    itemStyle: {
                        borderWidth: 0.5
                    },
                    yearLabel: { show: false }
                },
                series: {
                    type: 'heatmap',
                    coordinateSystem: 'calendar',
                    data: reliArray
                }
            };

结语

前端菜鸟一枚，别的就不多说了，希望能帮助到一些人就好。