echarts 之 source and clone函数问题hasOwnProperty is not defined
图表渲染时报错如下:
echarts 实例的 setOption 方法用来加载/更新图表数据,setOption 方法内部首先使用了 zrender 的 clone 函数对 options 进行了拷贝。但是 zrender 的 clone 方法是不严谨的,下面是一处不严谨的源码位置:
1 else if (!BUILTIN_OBJECT[typeStr] && !isPrimitive(source) && !isDom(source)) {
2 result = {} as any;
3 for (let key in source) {
4 if (source.hasOwnProperty(key)) {
5 result[key] = clone(source[key]);
6 }
7 }
8 }
问题就出在 source.hasOwnProperty(key) 这一行上,source 就是 option.dataset.source,所以 source 就是 object 或 array。
什么情况下 source.hasOwnProperty(key)会报错? 当 source 是一个平坦对象时,即没有继承 Object 原型的对象!例如使用 Object.create(null)创建的对象。
source 通常是我们通过接口请求到的数据进行设置的,接口请求就涉及到 JSON 反序列化,如果你用了第三方的 JSON 序列化库就可能出现平坦对象 clone 报错的问题(source.hasOwnProperty is not defined)。
这个问题其实不算特别严重,因为用原生的 JSON 解析函数就没有问题。但是吧,echarts setOption 报错 source.hasOwnProperty is not defined 你很难第一时间想到是接口请求 json 解析出了问题。
echarts 之 source and clone函数问题hasOwnProperty is not defined的更多相关文章
- 实现一个clone函数,对javascript中的5种数据类型进行值复制
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 具体解释clone函数
我们都知道linux中创建新进程是系统调用fork,但实际上fork是clone功能的一部分,clone和fork的主要差别是传递了几个參数.clone隶属于libc.它的意义就是实现线程. 看一下c ...
- Linux Clone函数
Linux Clone函数 之前某一次有过一次面试,问了内核中是怎么创建命名空间的? 下面就来扒一扒clone的精髓,以及如何通过它创建命名空间. 目录 Linux Clone函数 使用clone创建 ...
- [Django REST framework - 序列化组件、source、钩子函数]
[Django REST framework - 序列化组件.source.钩子函数] 序列化器-Serializer 什么是rest_framework序列化? 在写前后端不分离的项目时: 我们有f ...
- 关于JS的clone()函数编写的一些问题
问题讲述:用js 实现一个clone()克隆函数,该函数会把输入进去的不同类型值Number,String,Undefined,Boolean,Function,Null,Object,Array,R ...
- js深入研究之扩展类,克隆对象,混合类(自定义的extend函数,clone函数,与augment函数)
1.类扩展 /* EditInPlaceField类 */ /* 扩展函数 */ function extend(subClass, superClass) { var F = function() ...
- vue echarts中绑定的click函数无法引用vue实例data里面的数据
在使用echarts的时候,需要在触发click事件之后去修改实例data里面的数据,可是发现用this引用后总是出现undefined, 解决办法: myChart.on('click', (par ...
- clone函数
http://blog.csdn.net/caianye/article/details/5947282 http://wenku.baidu.com/link?url=qnq7laYDYm1V8tl ...
- Echarts 的Formatter的回调函数
option = { tooltip: { trigger: 'axis', formatter: function (params,ticket,callback) { let res = para ...
- browserify文件后函数调用报is not defined的原因
举个例子: a.js ; module.exports.a = a; b.js var result = require('./a'); var getA =() => { console.lo ...
随机推荐
- 学习Java Day21
今天学习了静态导入,可以导入静态方法和静态字段
- 学习Java Day16
今天学习静态数据的使用
- 基于Vue3的Leaflet基础
1. 概述 Leaflet 是一个开源.轻量并且对移动端友好的交互式地图 JavaScript 库,大小仅仅只有 39 KB, 拥有绝大部分开发者所需要的所有地图特性 Leaflet 的官网为:Lea ...
- 一文吃透 Go 内置 RPC 原理
hello 大家好呀,我是小楼,这是系列文<Go底层原理剖析>的第三篇,依旧分析 Http 模块.我们今天来看 Go内置的 RPC.说起 RPC 大家想到的一般是框架,Go 作为编程语言竟 ...
- 计算机存储内部数据的原理,编程语言的发展史和分类,python解释器的下载和安装,计算机cmd窗口的使用,环境变量和解释器多版本共存方法
计算机内部存储数据的原理 计算机内部只认识01二进制. 存储单位:0和1分别代表一个比特位(bit).8bit=1bytes(字节) 1024kb=1MB 1024MB=1GB 1024GB=1TB ...
- 文字icon
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="U ...
- JetBrains之全家桶破解
JetBrains之全家桶破解(idea,rider....) 链接之....JETBRA.IN 打开上面的链接 随便点击下图中一个可用的链接,进入之后看下一步. 打开上一步的链接之后,下载下图中红框 ...
- java--BigDecimal 类型介绍
BigDecimal.add(); //加法 BigDecimal.subtract(); //减法 BigDecimal.multiply(); //乘法 BigDecimal.divi ...
- cookie,session,token,drf-jwt
1.cookie,session,token发展史 引入:我们都知道 http 协议本身是一种无状态的协议,一个普通的http请求简单分为三步:客户端发送请求request服务端收到请求并进行处理服务 ...
- windows mongo 开启副本集 6.x版本 mongo : 无法将“mongo”项识别为 cmdlet、函数、脚
mongo报错 当前使用版本6.0.3,bin目录下并没有mongo.exe,所以没有mongo命令, 需要下载 https://www.mongodb.com/try/download/shell ...