zrender TypeError: “x“ is not a constructor

article/2025/9/21 3:18:24

如果有兴趣了解更多相关内容,欢迎来我的个人网站看看:耶瞳空间

我是调用zrender的init方法报错,如下图:
在这里插入图片描述

然后经过大佬指点,这种开发环境没问题但生产环境报错的东西,一般是因为打包的时候被tree-shaking掉了。

debug+翻看源码后发现丢失调的是registerPainter方法
在这里插入图片描述

模仿源码去调用:
在这里插入图片描述

import { init } from "zrender";
import { registerPainter } from 'zrender';
import CanvasPainter from 'zrender/lib/canvas/Painter';
import SVGPainter from 'zrender/lib/svg/Painter';
registerPainter('canvas', CanvasPainter);
registerPainter('svg', SVGPainter);

问题解决。真是神奇的经历。

对了,这个项目已经上线了,也开源了,地址:http://stars.eyescode.top


http://chatgpt.dhexx.cn/article/HFkZOOlq.shtml

相关文章

vue+zrender实现医院体温单

项目背景 医院医护项目需求,需要用H5做一个通用的体温单 项目演示 版本一 版本二 项目代码简介 由vue-cli4脚手架快速搭建生成,主要代码都在thermometer.vue文件里面,后续修改也主要是在这个文件修改。 项目需求难点在中间的网格部分…

ZRender开发

ZRender开发 开发文档&#xff1a;https://ecomfe.github.io/zrender-doc/public/ <!-- eslint-disable no-undef --> <template><div class"config-page"><div class"header"><el-button click"handleAdd">撒…

Echarts 源码解读 一:zrender源码分析1var zr = zrender.init(document.getElementById(‘main‘));

2021SCSDUSC 因为Echarts是基于zrender进行实现的&#xff0c;所以解读echarts源码前&#xff0c;首先要对zrender有基本的了解。 zrender是canvas的一个类库&#xff0c;zrender是基于canvas实现的。 目录 zrender的src文件夹 文件夹&#xff1a; animation动画相关 cont…

高效canvas绘图框架——zrender

一个轻量级的Canvas类库&#xff0c;MVC封装&#xff0c;数据驱动&#xff0c;提供类Dom事件模型&#xff0c;让canvas绘图大不同 Architecture MVC核心封装实现图形仓库、视图渲染和交互控制&#xff1a; Stroage(M) : shape数据CURD管理Painter(V) : canvase元素生命周期管理…

轻量级的Canvas类库zrender使用笔记 :简单自定义图件开发

ECharts&#xff0c;一个纯 Javascript 的图表库&#xff0c;底层依赖轻量级的 Canvas 类库 ZRender&#xff0c;提供直观&#xff0c;生动&#xff0c;可交互&#xff0c;可高度个性化定制的数据可视化图表。当然我们自己可能有些需求&#xff0c;通过修改ECharts或者highchar…

vue-echarts的ZRender事件

首先贴出 vue-echarts 的官网连接&#xff1a;https://www.npmjs.com/package/vue-echarts 1、vue-echarts 具体在vue中的使用方法&#xff0c;本文中就暂时不多介绍了&#xff1b; 2、如何在vue中使用vue-echarts的鼠标事件&#xff1a; 具体使用方式跟vue中使用echarts一样&a…

ZRender文档研读 (基于4.3.2版本)

ZRender文档研读 &#xff08;基于4.3.2版本&#xff09; 不使用最新的5.x.x的版本是因为线上文档和最新版本JS文件不匹配-2022年6月13日 1、文档地址 1、官方文档的地址&#xff1a;https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable 2、Github地址…

【ZRender 渲染引擎 - 贰】 | Vue 框架集成与绘制其他图元

theme: cyanosis 持续创作&#xff0c;加速成长&#xff01;这是我参与「掘金日新计划 10 月更文挑战」的第 8 天&#xff0c;点击查看活动详情 1. Vue 中使用 ZRender 上一篇中&#xff0c;我们通过最原始的方式体验了一下 ZRender 的使用。接下来&#xff0c;为了更方便管理…

zrender实现图形缩放功能

zrender实现图形缩放功能 一、绘制一个矩形图 <div id"main-container"></div>#main-container {width: 500px;height: 300px;border: 1px solid #888; }import * as zrender from zrenderconst container document.querySelector(#main-container) c…

ECharts 3.0底层zrender 3.x源码分析1-总体架构

zrender是一个轻量级的Canvas类库&#xff0c;作为百度Echarts 3.0的底层基础。截至目前查看的zrender源码和文档&#xff0c;包括官网文档都还停留在2.x时代&#xff0c;我打算用一个系列介绍下zrender 3.x的使用和源码&#xff0c;一些demo和没有在博客中介绍的源码请进我的g…

ZRender (Canvas)简单使用(拖拽、缩放、旋转、文字、层级)

一、ZRender 是二维绘图引擎&#xff0c;它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器&#xff1b; 二、下面是以图片做的简单demo&#xff0c;分为左中右三部分&#xff0c;左边是需要的图片&#xff0c;中间是绘图部分&#xff0c;右边是添加文字…

源码解读之zrender-ZRender 类(3)

00 小结 当我们在 zrender.init(document.getElementById(“canvas”))时&#xff0c;首先实例化了一个 ZRender 实例&#xff0c;在这个实例化过程中&#xff0c;主要实例化了&#xff1a; Storage 类&#xff0c;作用类似于全局状态管理Painter 类&#xff0c;可以理解为画…

【ZRender 渲染引擎 - 壹】 | 基础图形元素绘制

theme: cyanosis 持续创作&#xff0c;加速成长&#xff01;这是我参与「掘金日新计划 10 月更文挑战」的第 7 天&#xff0c;点击查看活动详情 开篇前言 在掘金认识我的都知道&#xff0c;我主要是研究 Flutter 的。其实我一直希望开发出一套好用的 Flutter 的图表库&#xf…

zrender学习

这个是项目总结&#xff0c;不适合学习 <div id"canvas" style"background-image:url(./canvasbg.gif)"></div> 定义zrender初始化对象&#xff0c;背景是一个gif图 样式如下 ↓ 工程里&#xff0c; topo.html <div id "containe…

zrender源码学习笔记(一):认识zrender

本文内容 入门zrender绘制原理 入门zrender zrender是Echarts底层的2D绘图引擎&#xff0c;在搞懂其原理之前&#xff0c;我们先学会如何使用zrender&#xff0c;我们从绘制一个简单圆形入门。这里也给出官网入门教程 初始化 zrender.init(dom)初始化zrender实例&#xff0c…

zrender 知识:使用zrender搭建流程图工具

首先看下最终的效果图&#xff1a; 主要使用的技术是zrender.js和vue.js&#xff0c;zrender 用于实现流程图&#xff0c;vue搭建整体架构。 本篇文章主要面向对zrender有一定了解的同学。 本篇文章只讲解核心flowchart的实现方法。 一.分析 流程图主要包含节点node、联系e…

zrender基础入门,简单的案例图形绘制

一、简单介绍 ZRender是二维绘图引擎&#xff0c;它提供 Canvas、SVG、VML 等多种渲染方式。ZRender也是ECharts的渲染器。 流程图&#xff1a; 二、使用入口 (1)npm install zrender&#xff0c;因为zrender不是浏览器自带不同于前面的canvas与svg&#xff0c;需要先下载 …

二维绘图引擎ZRender

1、开始使用 描述 ZRender是二维绘图引擎&#xff0c;它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。 下载 ZRender 项目在 gitHub ,也可以使用 npm install zrender 下载。 在 dist 目录下找到 zrender.js 和 zrender.min.js&#xff0c;前者是开发…

MATLAB中求矩阵的特征值和特征向量

矩阵特征值的数学定义 设A是n阶方阵&#xff0c;如果存在常数λ和n维非零列向量x&#xff0c;使得等式Axλ x成立&#xff0c;则称λ为A的特征值&#xff0c;x是对应特征值λ的特征向量。 求特征值和特征向量&#xff1a; eig(A)&#xff1a;求矩阵A的全部特征值&#xff0c…

简单易懂的特征值与特征向量

特征值与特征向量是线性代数中一个很基础的知识&#xff0c;但是很多人对这两个概念没有一个直观的概念&#xff0c;从直觉上&#xff0c;很难理解这两个东西&#xff0c;只知道公式&#xff0c;但是不知道它代表的意义。当年上现代课的时候&#xff0c;老师根本不会去讲这些东…