图表渲染时报错如下:

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. 【python自动化测试】1- python基础和pycharm使用

    python基础和pycharm使用 1.pycharm 1.1 为特定格式文件添加头信息 File--Settings--Editor--File and Code Templates--Pytho ...

  2. P5787 二分图 /【模板】线段树分治

    \(\text{Solution}\) 线段树分治的模板 对时间分治,线段树下标表示时间 在线段树上处理每条覆盖当前区间的边,对当前的时间区间求答案 小区间的信息可以由大区间一路下来得到,那么答案就是 ...

  3. 「CEOI2019」魔法树

    \(\text{Solution}\) 设 \(f_{x,i}\) 表示以 \(x\) 为根的子树 \(i\) 天后的最大收益 那么 \(f_{x,i} = \max(f_{x,i-1},w_x [d ...

  4. 理解JS函数之call,apply,bind

    前言 在 JavaScript 中,apply.bind 和 call 是三个重要的函数,它们都是 Function.prototype 的方法.这些函数可以让我们动态地改变函数的 this 值,或者 ...

  5. 自己从零写操作系统GrapeOS系列教程——4.GrapeOS开发环境介绍

    1. 开发环境简介 为了减少开发过程中不必要的麻烦,希望大家的开发环境尽量与我的保持一致. 我的开发环境如下: Windows10电脑一台 Visual Studio Code(最好是最新版) Vir ...

  6. JSP 与 Servlet 之间的联系,及其语法

    JSP 是什么 JSP 将 Java 代码和特定变动内容嵌入到静态的页面中,实现以静态页面为模板,动态生成其中的部分内容.JSP 文件在运行时会被其编译器转换成更原始的 Servlet 代码.JSP ...

  7. WebGPU 01之Hello Triangle

    1. 引言 WebGPU是什么? WebGPU 到底是什么? - Orillusion的回答 - 知乎 WebGPU与WebGL的对比? WebGL 与 WebGPU 比对 前奏 - 四季留歌 - 博 ...

  8. 论文学习 Dilated Inception U-Net (DIU-Net) for Brain Tumor Segmentation 1

    好记性不如烂笔头 边学习边记录1 主题:脑肿瘤分割 使用基于Unet的端到端的网络结构,在扩张和紧缩路径中加入了Inception模块和空洞卷积. 数据集:Tumor Segmentation (Br ...

  9. 学习操作系统P4 理解并发程序执行 (Peterson算法、模型检验与软件自动化工具)

    啊 多一个线程,在状态机里也可以理解为多一个栈帧 啊 啊 啊 错误如下图所示 啊 啊 当只有一个人想上厕所时,只有一个旗子被举起来,因此举旗的人可以直接进厕所 当两个人都想上厕所时,看门上的名字可以判 ...

  10. Codeforces 1281E

    Link 题意:一棵$2n$个点的树让你分配$n$对居民在点上求每对居民之间路径和的最小值和最大值 思路:考虑一条边$(u, v)$ 1.若要使答案尽可能大,那么这条边应该取到尽可能多次.显然,如果$ ...