热力图(Heatmap)实现

热力图(Heatmap)实现

热力图是一种通过颜色变化展示数据密度的可视化方式，特别适合展示大量数据的分布情况。ECharts提供了强大的热力图组件，支持多种坐标系下的热力图展示，包括直角坐标系、地理坐标系和日历坐标系。

基本热力图配置

在ECharts中创建热力图需要配置series中的type为'heatmap'。最基本的配置包括：

option = {
    tooltip: {},
    visualMap: {
        min: 0,
        max: 10,
        inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
        }
    },
    series: [{
        type: 'heatmap',
        data: [
            [0, 0, 5],
            [1, 0, 7],
            [2, 0, 3],
            // 更多数据...
        ]
    }]
};

坐标系类型

ECharts支持三种坐标系下的热力图：

直角坐标系热力图

这是最常见的类型，x轴和y轴都是数值或类别轴：

option = {
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'category',
        data: ['早餐', '午餐', '晚餐']
    },
    series: [{
        type: 'heatmap',
        data: [
            [0, 0, 10], // 周一早餐
            [0, 1, 20], // 周一午餐
            [0, 2, 30], // 周日晚餐
            // 更多数据...
        ]
    }]
};

地理坐标系热力图

在地图上展示热力图，需要引入地图数据：

option = {
    geo: {
        map: 'china'
    },
    series: [{
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92, 100]},
            {name: '上海', value: [121.48, 31.22, 90]},
            // 更多数据...
        ]
    }]
};

日历坐标系热力图

适合展示时间序列数据：

option = {
    calendar: {
        range: '2023-06'
    },
    series: [{
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: [
            ['2023-06-01', 12],
            ['2023-06-02', 5],
            // 更多数据...
        ]
    }]
};

数据格式

热力图支持多种数据格式：

二维数组格式

data: [
    [xIndex, yIndex, value],
    [xIndex, yIndex, value],
    // ...
]

对象格式

data: [
    {value: [xIndex, yIndex, value]},
    {value: [xIndex, yIndex, value]},
    // ...
]

地理坐标格式

data: [
    {name: '地点名称', value: [lng, lat, value]},
    // ...
]

视觉映射配置

visualMap组件控制热力图的颜色映射：

visualMap: {
    min: 0,
    max: 100,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '10%',
    inRange: {
        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
    }
}

高级配置

点大小与模糊尺寸

series: [{
    type: 'heatmap',
    pointSize: 10,
    blurSize: 5
}]

渐变效果

series: [{
    type: 'heatmap',
    emphasis: {
        itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    }
}]

自定义形状

series: [{
    type: 'heatmap',
    symbol: 'path://M0,0L1,0L1,1L0,1Z', // 自定义路径
    symbolSize: [20, 20]
}]

大数据量优化

对于大数据量热力图，可以使用渐进渲染：

series: [{
    type: 'heatmap',
    progressive: 1000,
    progressiveThreshold: 3000
}]

交互功能

数据筛选

visualMap: {
    type: 'piecewise',
    pieces: [
        {min: 0, max: 10, label: '0-10'},
        {min: 10, max: 20, label: '10-20'},
        // ...
    ]
}

联动高亮

series: [{
    type: 'heatmap',
    emphasis: {
        focus: 'series',
        itemStyle: {
            borderColor: '#333',
            borderWidth: 1
        }
    }
}]

实际应用示例

网站点击热力图

option = {
    tooltip: {
        position: 'top'
    },
    grid: {
        height: '80%',
        top: '10%'
    },
    xAxis: {
        type: 'category',
        data: ['首页', '产品页', '购物车', '支付页', '个人中心'],
        splitArea: {
            show: true
        }
    },
    yAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        splitArea: {
            show: true
        }
    },
    visualMap: {
        min: 0,
        max: 1000,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        bottom: '0%'
    },
    series: [{
        name: '点击量',
        type: 'heatmap',
        data: [
            [0, 0, 100], [0, 1, 200], [0, 2, 150],
            [1, 0, 300], [1, 1, 400], [1, 2, 350],
            // 更多数据...
        ],
        label: {
            show: true
        },
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

城市人口密度热力图

$.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json', function(geoJson) {
    echarts.registerMap('china', geoJson);
    
    var option = {
        geo: {
            map: 'china',
            roam: true
        },
        visualMap: {
            min: 0,
            max: 20000,
            text: ['高', '低'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695']
            }
        },
        series: [{
            name: '人口密度',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92, 20000]},
                {name: '上海', value: [121.48, 31.22, 18000]},
                // 更多城市数据...
            ],
            pointSize: 10,
            blurSize: 5
        }]
    };
    
    myChart.setOption(option);
});

性能优化技巧

1. 对于大数据集，使用large: true开启大数据模式
2. 设置合理的progressive和progressiveThreshold
3. 使用dataZoom组件限制显示范围
4. 简化visualMap的颜色梯度
5. 在移动端考虑降低渲染精度

series: [{
    type: 'heatmap',
    large: true,
    progressive: 2000,
    progressiveThreshold: 5000
}]