Incubator-echarts: heatmap-bmap报错:Cannot read property 'type' of null

Created on 4 Nov 2016  ·  3Comments  ·  Source: apache/incubator-echarts

问题简述 (One-line summary)

heatmap-bmap初始化时报错 Cannot read property 'type' of null

版本及环境 (Version & Environment)

  • ECharts 版本 (ECharts version): 3.2.3
  • 浏览器类型和版本 (Browser version):Chrome 54
  • 操作系统类型和版本 (OS Version): Mac

ECharts配置项 (ECharts option)

option = {
   animation: false,
   bmap: {
       center: point,
       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',
      data: points,
      pointSize: 5,
      blurSize: 6
  }]
}

错误信息如下

angular.js:10467TypeError: Cannot read property 'type' of null
    at ExtendedClass.render (http://localhost:8080/entry/1.bundle.js:47297:26)
    at ECharts.<anonymous> (http://localhost:8080/entry/1.bundle.js:1037:24)
    at ExtendedClass.<anonymous> (http://localhost:8080/entry/1.bundle.js:2274:21)
    at Array.forEach (native)
    at each (http://localhost:8080/entry/1.bundle.js:2807:18)
    at ExtendedClass.eachSeries (http://localhost:8080/entry/1.bundle.js:2272:14)
    at ECharts.doRender (http://localhost:8080/entry/1.bundle.js:1034:18)
    at ECharts.update (http://localhost:8080/entry/1.bundle.js:521:23)
    at ECharts.prepareAndUpdate (http://localhost:8080/entry/1.bundle.js:654:35)
    at ECharts.echartsProto.setOption (http://localhost:8080/entry/1.bundle.js:309:45)

错误追踪如下

module.exports = require('../../echarts').extendChartView({

        type: 'heatmap',

        render: function (seriesModel, ecModel, api) {
            var visualMapOfThisSeries;
            ecModel.eachComponent('visualMap', function (visualMap) {
                visualMap.eachTargetSeries(function (targetSeries) {
                    if (targetSeries === seriesModel) {
                        visualMapOfThisSeries = visualMap;
                    }
                });
            });

            if (__DEV__) {
                if (!visualMapOfThisSeries) {
                    throw new Error('Heatmap must use with visualMap');
                }
            }

            this.group.removeAll();
            var coordSys = seriesModel.coordinateSystem;
            //  这里报错了 seriesModel中没有coordinateSystem属性导致取不到type
            if (coordSys.type === 'cartesian2d') {    
                this._renderOnCartesian(coordSys, seriesModel, api);
            }
            else if (isGeoCoordSys(coordSys)) {
                this._renderOnGeo(
                    coordSys, seriesModel, visualMapOfThisSeries, api
                );
            }
        },
        ..............
        ............

通过调试我发现是在赋值coordinateSystem出了问题,导致seriesModel没有seriesModel属性。
如果看到问题,烦请抽时间看一下,期待您的解答或者提供解决思路,谢谢。

Most helpful comment

All 3 comments

设置 coordinateSystem 为 calendar 也会报这个错误。

const options = {
        tooltip: {
          position: 'top'
        },
        visualMap: {
          min: 0,
          max: 1000,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          top: 'bottom'
        },
        calendar: {
          range: '2017',
          cellSize: ['auto', 20]
        },
        series: [{
          name: 'test',
          type: 'heatmap',
          coordinateSystem: 'calendar',
          data: this.chartData
        }]
      }

【写给后来人】
没有引入 calendar 组件
我在 Vue 项目中遇到了同样问题,这里引入后可以了
image

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kirazxyun picture kirazxyun  ·  3Comments

arssam picture arssam  ·  3Comments

Cyycl picture Cyycl  ·  3Comments

jarben picture jarben  ·  3Comments

marine1ly picture marine1ly  ·  3Comments