echarts极坐标Polar结合热力（维彩、色阶）图Heatmap

Echarts极坐标系中创建热力图(色阶)实战

最新推荐文章于 2025-10-08 21:59:14 发布

原创

最新推荐文章于 2025-10-08 21:59:14 发布 · 2.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

本文介绍了如何在Echarts中利用极坐标系统结合色阶展示热力图。通过代码示例展示了具体的实现过程，最终生成了一种独特的数据可视化效果。

echarts图表展示项目中有用到数据生成极坐标图，并显示色阶展示，多方查找下终于解决，生成了极坐标热力图，样式如下：

代码如下：

<div id="heartMap" style="width: 800px;height:600px;"></div>
heatMap()
    function heatMap() {
        var heatMapChart = echarts.init(document.getElementById("heartMap"));
        function renderItem(params, api) {
            var values = [api.value(0), api.value(1)];
            var coord = api.coord(values);
            var size = api.size([1, 1], values);
            return {
                type: 'sector',
                shape: {
                    cx: params.coordSys.cx,
                    cy: params.coordSys.cy,
                    r0: coord[2] - size[0] / 2,
                    r: coord[2] + size[0] / 2,
                    startAngle: -(coord[3] + size[1] / 2),
                    endAngle: -(coord[3] - size[1] / 2)