图表渲染时报错如下:

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的更多相关文章

  1. 实现一个clone函数,对javascript中的5种数据类型进行值复制

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 具体解释clone函数

    我们都知道linux中创建新进程是系统调用fork,但实际上fork是clone功能的一部分,clone和fork的主要差别是传递了几个參数.clone隶属于libc.它的意义就是实现线程. 看一下c ...

  3. Linux Clone函数

    Linux Clone函数 之前某一次有过一次面试,问了内核中是怎么创建命名空间的? 下面就来扒一扒clone的精髓,以及如何通过它创建命名空间. 目录 Linux Clone函数 使用clone创建 ...

  4. [Django REST framework - 序列化组件、source、钩子函数]

    [Django REST framework - 序列化组件.source.钩子函数] 序列化器-Serializer 什么是rest_framework序列化? 在写前后端不分离的项目时: 我们有f ...

  5. 关于JS的clone()函数编写的一些问题

    问题讲述:用js 实现一个clone()克隆函数,该函数会把输入进去的不同类型值Number,String,Undefined,Boolean,Function,Null,Object,Array,R ...

  6. js深入研究之扩展类,克隆对象,混合类(自定义的extend函数,clone函数,与augment函数)

    1.类扩展 /* EditInPlaceField类 */ /* 扩展函数 */ function extend(subClass, superClass) { var F = function() ...

  7. vue echarts中绑定的click函数无法引用vue实例data里面的数据

    在使用echarts的时候,需要在触发click事件之后去修改实例data里面的数据,可是发现用this引用后总是出现undefined, 解决办法: myChart.on('click', (par ...

  8. clone函数

    http://blog.csdn.net/caianye/article/details/5947282 http://wenku.baidu.com/link?url=qnq7laYDYm1V8tl ...

  9. Echarts 的Formatter的回调函数

    option = { tooltip: { trigger: 'axis', formatter: function (params,ticket,callback) { let res = para ...

  10. browserify文件后函数调用报is not defined的原因

    举个例子: a.js ; module.exports.a = a; b.js var result = require('./a'); var getA =() => { console.lo ...

随机推荐

  1. LG P4449 & JZOJ 于神之怒

    \(\text{Problem}\) JZOJ上,求 \[\sum_{i=1}^n \sum_{j=1}^m \gcd(i,j)^k \] 对 \(10^9+7\) 取模 \(n,m,k \le 5 ...

  2. 2020.11.30【NOIP提高A组】模拟

    总结与反思 很不幸,估分 \(170\),可惜 \(T2\) 暴力 \(50pts\) 全掉了 \(T1\) 结论题,如果想到了,\(O(n)\) 过,只有十几行代码 感觉不好想,不过还是 \(A\) ...

  3. Canvas:绘制失败的问题

    beginPath 绘制路径必须添加 beginPath().它标志着一个画笔在画布中哪个地方开始画起.没有它,新起的画笔位置必定与上一次画笔结束的位置相连. // 第一个半圆 ctx.arc(60, ...

  4. postgresql序列基本操作

    1.创建序列 CREATE SEQUENCE if not exists test_mergetable_id_seq INCREMENT 1 MINVALUE 1 MAXVALUE 99999999 ...

  5. pat 乙级1024 科学计数法关于stl中size()的一些思考即测试点六,无符号整数问题

    来,先看题目:1024 科学计数法 分数 20 作者 HOU, Qiming 单位 浙江大学 科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,其满足正则表达式 [+-][1-9].[0-9 ...

  6. SVN提交到服务器退回至指定版本(撤销操作)

    一.撤销已提交内容如果不小心把修改错误的文件提交到服务器上去了 可对其进行复原(指定单个文件撤销) 解决方法: 查看修改的日志 查看错误提交的文件 可以查看到这个文件改了什么 复原此版本作出的修改 然 ...

  7. 解决MySQL5.5MySQLInstanceConfig最后一步setting报错

    问题描述 在安装过MySQL(或已卸载)的电脑中重新安装MySQL5.5, 在安装最后一项中Processing configuration中最后一项配置失败: 问题解决: 首先关于卸载: 安装时候若 ...

  8. 四点DLT (Direct Linear Transformation) 算法

    \(\mathrm{x}_{i}\) 表示变化前的齐次坐标 \(\mathbf{x}_{i}^{\prime}\) 表示变化后的齐次坐标 我们需要求到一个 \(3\times3\) 的变换矩阵 \(\ ...

  9. mysql数据库新建用户,并赋予权限

    新建用户: CREATE USER 'testuser'@'LOCALHOST' IDENTIFIED BY '123456'; 赋予权限: grant select on *.* to 'testu ...

  10. mysql应用程序无法正常启动0xc000007b错误解决方法

    一般大家从mysql官网下载mysql安装包是一个zip压缩文件,照着网上步骤,操作mysqld --initialize,却发现系统报错, 其实是因为缺少一些C++组件以及python组件引起的,如 ...