[bug] heatmap in geo

[alphabetabc]

Version

5.0.0

Steps to reproduce

基于geo坐标系的热力图

{
  "geo": {
    "map": "china",
    "roam": true
  },
  "visualMap": {
    "show": false,
    "min": 0,
    "max": 5,
    "inRange": {
      "color": [
        "blue",
        "blue",
        "green",
        "yellow",
        "red"
      ]
    }
  },
  "series": [
    {
      "type": "heatmap",
      "coordinateSystem": "geo",
      "geoIndex": 0,
      "data": [
        [
          120.14322240845,
          30.236064370321,
          1
        ],
        [
          120.14280555506,
          30.23633761213,
          1
        ],
        [
          120.14307598649,
          30.236125905084,
          1
        ],
        [
          120.14301682797,
          30.236035316745,
          1
        ],
        [
          120.1428734612,
          30.236160551632,
          1
        ],
        [
          120.14200215328,
          30.23595702204,
          1
        ],
        [
          120.14138577045,
          30.236113748704,
          1
        ],
        [
          120.1400398833,
          30.235973050702,
          1
        ],
        [
          120.13893453465,
          30.23517220446,
          1
        ],
        [
          120.1382899739,
          30.234062922977,
          1
        ]
      ],
      "pointSize": 5,
      "blurSize": 6
    }
  ]
}

What is expected?

正常展示

What is actually happening?

在4.9.0中正常展示 在5.0.0中报错
Uncaught TypeError: coordSys.dataToRect is not a function at HeatmapView._renderOnCartesianAndCalendar (echarts.js:59155)
at HeatmapView.incrementalRender (echarts.js:59085)

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[plainheart]

我测试了下，并未发现有报错的情况，https://www.makeapie.com/editor.html?c=x0-0jU_YJG&v=1 请检查是否正在使用按需引入导致少引了部分组件。

[alphabetabc]

我测试了下，并未发现有报错的情况，https://www.makeapie.com/editor.html?c=x0-0jU_YJG&v=1 请检查是否正在使用按需引入导致少引了部分组件。

---

这块是不是对数据长度有限制，我用了3200条数据，导致的报错，2999条都不会 @plainheart

[kirincc]

我测试了下，并未发现有报错的情况，https://www.makeapie.com/editor.html?c=x0-0jU_YJG&v=1 请检查是否正在使用按需引入导致少引了部分组件。

这块是不是对数据长度有限制，我用了3200条数据，导致的报错，2999条都不会 @plainheart

你好，不知可否分享一下这个demo的源码？我使用v5版本，一直提示 There is a chart instance already initialized on the dom. 然后界面上未渲染出地图

[plainheart]

@kirinc heatmap-geo.html 注意去掉文件扩展名中的 .txt

[kirincc]

@kirinc heatmap-geo.html 注意去掉文件扩展名中的 .txt

非常感谢，自定义 registerMap 地图的效果我参考makepie的配置已经实现。 有一个新问题，不知是否需要提起新issue？

官网的热力图demo：https://echarts.apache.org/examples/zh/editor.html?c=heatmap-bmap 我在本地使用ant-design-proV5.0.0 + echartsV5.2.1/V4.9.0，都会存在同一个报错（如图）。

排查源码发现在 HeatmapView.js 的 134 行中，coordinateSystem 未获取到，但无进一步结果。

    var coordSys = seriesModel.coordinateSystem;

核心代码如下：不知是否能指出错误所在，或者需要我提供一个codesandbox

import React, { useEffect } from "react";
import * as echarts from "echarts";
import { VisualMapComponent } from "echarts/components";
import { HeatmapChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import { loadBaiduMap } from "../utils";

echarts.use([VisualMapComponent, HeatmapChart, CanvasRenderer]);

const BigScreen = () => {
  useEffect(() => {
    loadBaiduMap().then(BMap => {
      const chartDom = document.getElementById("myChartChina");
      if (!chartDom) return;

      const myChart = echarts.init(chartDom);
      const option = {
        animation: false,
        bmap: {
          center: [120.13066322374, 30.240018034923],
          zoom: 14,
          roam: true,
        },
        visualMap: {
          show: false,
          top: "top",
          min: 0,
          max: 5,
          seriesIndex: 0,
          calculable: true,
          inRange: {
            color: ["blue", "blue", "green", "yellow", "red"],
          },
        },
        series: [
          {
            type: "heatmap",
            coordinateSystem: "bmap",
            pointSize: 5,
            blurSize: 6,
            data: [
              [120.14322240845, 30.236064370321, 1],
              [120.14280555506, 30.23633761213, 1],
              [120.14307598649, 30.236125905084, 1],
              [120.14301682797, 30.236035316745, 1],
              [120.1428734612, 30.236160551632, 1],
              [120.14200215328, 30.23595702204, 1],
              [120.14138577045, 30.236113748704, 1],
              [120.1400398833, 30.235973050702, 1],
              [120.13893453465, 30.23517220446, 1],
              [120.1382899739, 30.234062922977, 1],
              [116.316492, 39.9503, 1200],
              [114.470789, 38.037838, 10200],
              [126.467859, 45.681738, 20200],
              [123.567469, 41.777989, 30200],
              [125.325281, 43.872672, 40200],
              [123.567469, 41.777989, 50200],
              [101.726648, 36.534489, 60200],
              [91.047937, 29.69583, 70200],
              [87.83993, 43.682293, 80200],
              [106.604578, 26.675096, 90200],
            ],
          },
        ],
      };

      myChart.setOption(option);

      // 添加百度地图插件
      let bmap = myChart.getModel().getComponent("bmap").getBMap();
      bmap.addControl(new BMap.MapTypeControl());
    });
  }, []);

  return (
    <div id="myChartChina" style={{ height: 500 }}></div>
  );
};

export default BigScreen;

[plainheart]

@kirincc 好像没加载 ECharts 的百度地图插件。这是为什么坐标系为 null 的原因。

import 'echarts/extension/bmap/bmap'

[kirincc]

@kirincc 好像没加载 ECharts 的百度地图插件。这是为什么坐标系为 null 的原因。

import 'echarts/extension/bmap/bmap'

非常感谢，解决了，这行是否可以补充到官网demo。 demo在开启【按需引入】选项后，并没有显示要引入该依赖。

[plainheart]

好的 稍后会检查一下。