Echarts——Invalid geoJson format Cannot read property 'length' of undefined

简介: Echarts——Invalid geoJson format Cannot read property 'length' of undefined

前言

做一个地图下钻的echarts,发现点击某几个县市的时候,报错Invalid geoJson format Cannot read property 'length' of undefined,

对比数据发现出现报错原因是因为数据类型中有GeometryCollection存在,但是echarts源码中却没有对应的解析。

访问官方的github仓库果然有issues存在以及对应的解决方法,不过却一直在pending中...

https://github.com/apache/echarts/issues/9350

地图下钻: https://github.com/wangyang0210/echartsMap

自己编译后文件

https://github.com/wangyang0210/echarts-4.4.0

内容

修改方法

编辑echarts-4.4.0\src\coord\geo\parseGeoJson.js文件,直接复制下面的内容覆盖同名方法;

/**
 * @alias module:echarts/coord/geo/parseGeoJson
 * @param {Object} geoJson
 * @return {module:zrender/container/Group}
 */
export default function (geoJson) {
    decode(geoJson);
    return zrUtil.map(zrUtil.filter(geoJson.features, function (featureObj) {
        // Output of mapshaper may have geometry null
        return featureObj.geometry
            && featureObj.properties
            && (
                // avoid length error if missing coordinates
                (featureObj.geometry.coordinates && featureObj.geometry.coordinates.length > 0)
                // allow GeometryCollection
                || (featureObj.geometry.geometries && featureObj.geometry.geometries.length > 0)
            )
            ;
    }), function (featureObj) {
        var properties = featureObj.properties;
        var geo = featureObj.geometry;
        var coordinates = geo.coordinates;
        var geometries = [];
        if (geo.type === 'Polygon') {
            geometries.push({
                type: 'polygon',
                // According to the GeoJSON specification.
                // First must be exterior, and the rest are all interior(holes).
                exterior: coordinates[0],
                interiors: coordinates.slice(1)
            });
        }
        else if (geo.type === 'MultiPolygon') {
            zrUtil.each(coordinates, function (item) {
                if (item[0]) {
                    geometries.push({
                        type: 'polygon',
                        exterior: item[0],
                        interiors: item.slice(1)
                    });
                }
            });
        }
        else if (geo.type === 'GeometryCollection') {
            var geometries2 = geo.geometries;
            zrUtil.each(geometries2, function (geo) { // OR      zrUtil.each(geometries2, function (geo) {
                var coordinates = geo.coordinates;
                if (geo.type === 'Polygon') { // this is a full copy from above
                    geometries.push({
                        type: 'polygon',
                        exterior: coordinates[0],
                        interiors: coordinates.slice(1)
                    });
                } // end full copy
            });
        }
        var region = new Region(
            properties.name,
            geometries,
            properties.cp
        );
        region.properties = properties;
        return region;
    });
}

编译

# Install the dependencies from NPM:
npm install
# If intending to build and get all types of the "production" files:
npm run release
# The same as `node build/build.js --release`
# If only intending to get `dist/echarts.js`, which is usually
# enough in dev or running the tests:
npm run build
# The same as `node build/build.js`
# Get the same "production" files as `node build/build.js`, while
# watching the editing of the source code. Usually used in dev.
npm run watch
# The same as `node build/build.js -w`
# Check the manual:
npm run help
# The same as `node build/build.js --help`

验证

dist\echarts.min.js复制到项目中,进行验证

学无止境,谦卑而行.

目录
相关文章
|
4月前
|
存储 JavaScript 前端开发
成功解决:Cannot read properties of undefined (reading ‘commit‘)
这篇文章提供了解决Vuex中"Cannot read properties of undefined (reading 'commit')"错误的两种方法:检查模板中的数据属性是否存在,以及确保在Vue实例中正确挂载了store对象。
成功解决:Cannot read properties of undefined (reading ‘commit‘)
|
4月前
|
JavaScript
VUE——filemanager-webpack-plugin报错TypeError: Cannot read property 'isFile' of undefined
VUE——filemanager-webpack-plugin报错TypeError: Cannot read property 'isFile' of undefined
94 0
|
2月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
81 1
|
2月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
527 0
|
3月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
4月前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
542 1
微信小程序使用echarts图表(ec-canvas)
|
4月前
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
4月前
Echarts——如何默认选中图表并显示tooltip
Echarts——如何默认选中图表并显示tooltip
99 1
|
4月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
4月前
|
JavaScript
Echarts——VUE中非根节点时不显示图表也无报错
Echarts——VUE中非根节点时不显示图表也无报错
43 1