图表渲染时报错如下:

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. HGAME2023_WP_WEEK2

    Git Leakage Githack一波带走,下载得到flag v2board 搜索得知V2Board存在越权漏洞,随便注册个账号拿到authorization 访问/api/v1/admin/us ...

  2. 我有一篇Java Stream使用手册,学了就是你的了!

    原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,非公众号转载保留此声明. 简介 日常编程工作中,Java集合会经常被使用到,且经常需要对集合做一些类似过滤.排序.对象转换之类的操作. 为 ...

  3. 解析关于Tomcat Servlet-request的获取请求参数及几种常用方法

    摘要:本文主要讲解Tomcat之Servlet-request请求参数.Servlet转发机制.常用方法 本文分享自华为云社区<浅谈Tomcat之Servlet-request获取请求参数及常用 ...

  4. nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error(可行)

    错误原因 在设置npm的cache和predix时,因为使用参考其他教程照抄,而没有修改为本机对应路径,本机上并没有这个地址,因此造成了错误. npm config set cache "D ...

  5. hash和hash tree

    在理想情况下,我们希望不经过任何比较,一次存取便能得到所查的记录,那就必须在记的存储位置和它的关键字之间建立一个确定的对应关系,使每个关键字和一个唯一的存储位置对应,因而在查找时候,根据这个对应关系与 ...

  6. JDBC:实现Java与数据库的连接

    先了解重要的编程思想:ORM(object relational mapping) 即将数据库与JAVA的类一一映射(对应) 一个数据表对应一个Java类 表中的一条记录对应Java类的一个对象 表中 ...

  7. C++ MFC学习 (五)

    Edit Control 当不设置多行时,敲击回车会关闭对话框 1 void CMFC_Demo4Dlg::OnBnClickedButton2() 2 { 3 // TODO: 在此添加控件通知处理 ...

  8. C++ MFC学习 (二)

    使用向导创建MFC程序 1. 新建-> 选择 MFC -> MFC应用程序 ->下一步 2. 应用程序类型选择     选择单个文档,MFC标准  -> 下一步   3. 下一 ...

  9. conda迁移虚拟环境

    Conda离线迁移虚拟环境主要是两步: 1 在原环境中打包 2 将打好的包copy到目标环境的指定位置 打包的命令很简单 conda pack -n 虚拟环境名 当试图导出base时,报错了 Cond ...

  10. u8g2 资料汇集

    移植U8g2 https://www.cnblogs.com/frozencandles/p/16358483.html 函数接口说明: https://github.com/olikraus/u8g ...