ZRender 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
ZRender 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
ZRender 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !

软件简介

ZRender 是一个轻量级的图形库,可为 Apache ECharts 提供 2d 绘制。

ZRender 是二维绘图引擎,它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。

ZRender 提供了将近 20 种图形类型,可以在文档 zrender.Displayable 下找到。如果想创建其他图形,也可以通过 zrender.Path.extend 进行扩展。

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (5)

加载中
https://ecomfe.github.io/zrender-doc/public/ api挂了吗?
2020/07/30 15:53
回复
举报
加载图片到画布,旋转后 图片 坐标与 画布不一致,怎么解决呢
2018/11/14 09:04
回复
举报
如何清空上一个绘制的图
2017/03/17 10:04
回复
举报
能实现拓扑图的功能吗? 连线后,线随着图形移动 #ZRender#
2015/04/26 00:06
回复
举报
请问force图添加节点的图像url后,能制定图片为圆形吗?? #ZRender#
2015/08/24 15:07
回复
举报
更多评论
暂无内容
发表于大前端专区
2014/09/25 11:32

zrender源码分析--初探

先看下,本次例子做的效果 然后开始代码: 调用init接口初始化 // zrender_demo.html var zr = zrender.init(document.getElementById('main')); 进入init方法,发现做2件事情:A、初始化ZRender;B、将其存入ZRender实例map索引 // zrender.js  /**  * zrender初始化  * 不让外部直接new ZRender实例,为啥?  * 不为啥,提供全局可控同时减少全局污染和降低命名冲突的风险!  *  * @param {HTMLElement} d...

0
0
发表于大前端专区
2014/09/01 11:36

zrender源码分析1:总体结构

开始 zrender(Zlevel Render) 是一个轻量级的Canvas类库,这里是GitHub的网址 点我, 类似的类库有Kinetic.JS、EaselJS。 但貌似都没有zrender好用(可能是更加符合国人的习惯),强大的图表工具echarts就是在zrender基础上建立, 用zrender和echarts做了两个关于canvas的两个可视化项目之后,忍不住看了下zrender的项目代码(也有需要修改源代码的缘故), 但是翻开之后,代码的结构比较清晰,注释也都是中文,比较容易读懂。...

0
9
发表了博客
2020/06/11 12:50

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

一、简单介绍 ZRender是二维绘图引擎,它提供 Canvas、SVG、VML 等多种渲染方式。ZRender也是ECharts的渲染器。 流程图: 二、使用入口 (1)npm install zrender,因为zrender不是浏览器自带不同于前面的canvas与svg,需要先下载 (2)在header中引入 <script src="./node_modules/zrender/dist/zrender.js"></script> 三、案例上代码 看注释!!!看注释!!!看注释!!! <!DOCTYPE html> <head> <meta charset="UTF-8">...

0
0
发表了博客
2018/03/28 13:29

ZRender实现粒子网格动画实战

注:本博文代码基于ZRender 3.4.3版本号开发,相应版本号库地址:ZRender 库。 效果 实现分析 通过上面显示的效果图,能够看出,这样的效果就是在Canvas中生成多个可移动的点,然后依据点之间的距离来确定是否连线。思路比較简单。 实现问题: 保持Canvas 100%显示 resize时。自己主动调节Canvas尺寸和内部变量 生成圆点 实现圆点的移动,及边界处理 实现原点的直线连接 Canvas设置 html: <canvas id="main"></canvas> css: #ma...

0
0
发表于大前端专区
2014/09/25 15:03

zrender源码分析2--初始化Storage

接上次分析到初始化ZRender的源码,这次关注内容仓库Storage的初始化 入口1:new Storage(); // zrender.js /**  * ZRender接口类,对外可用的所有接口都在这里!!  * storage(M)、painter(V)、handler(C)为内部私有类,外部接口不可见  * 非get接口统一返回支持链式调用~  *  * @param {string} id 唯一标识  * @param {HTMLElement} dom dom对象,不帮你做document.getElementById  *  * @return...

0
0
发表于大前端专区
2014/09/25 16:31

zrender源码分析3--初始化Painter绘图模块

接上次分析到初始化ZRender的源码,这次关注绘图模块Painter的初始化 入口1:new Painter(dom, this.storage); // zrender.js /**  * ZRender接口类,对外可用的所有接口都在这里!!  * storage(M)、painter(V)、handler(C)为内部私有类,外部接口不可见  * 非get接口统一返回支持链式调用~  *  * @param {string} id 唯一标识  * @param {HTMLElement} dom dom对象,不帮你做document.getElementById...

0
0
发表了博客
2020/07/12 08:32

zrender--数字动画,动画期间,小数点位数的不同的判断

效果

0
0
发表了博客
2019/02/13 11:45

vue中报错: * zrender/lib/contain/line in ./node_modules/_echarts@4.2.0-rc.2@echarts/lib/cha

1、报错背景:之前一切正常,然后项目需要上传到svn上,我把写好的项目换了个位置,上传、运行,结果竟然报了 361个错!!! 项目中使用了echarts,报错信息如下: ERROR Failed to compile with 361 errors 11:34:57 These dependencies were not found: * zrender/lib/contain/line in ./node_modules/_echarts@4.2.0-rc.2@echarts/lib/cha rt/helper/LargeLineDraw.js * zrender/lib/contain/polygon in ./node_modules/_ech...

0
0
2016/07/08 15:14

通过zrender对象向echarts3中添加图形(shape)

需求概述:在环形饼状图中间添加一个固定的文字显示。 最开始的思路还是通过echarts提供现有的图表实现,其实就是在饼状图的中间添加一个单项data的饼图,效果就是一个实心圆型图,然后把label的位置设置成inner,效果如下: 这样实现的代码如下(option代码): option = { legend: { orient: 'vertical', x: 'left', data:['政治风险','廉政风险','渎职风险','绩效风险'] }, series: [ { name:'风险预警', type:'pie', select...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了问答
2016/10/25 14:01

奇了怪了!zrender/tool/color中的color.js

zrender/tool/color中的color.js根本就没有getColor等方法,浏览器根本就通过不了,用的飞起!!!

3
0
发表了问答
2014/12/05 11:47

toDataURL()方法在IE8返回值为空

@Kener-林峰 你好,想跟你请教个问题: ZRender的toDataURL()方法在IE8浏览器返回值为空有没有解决方法

2
0
发表了问答
2016/05/05 15:36

echarts3怎么使用zender

5
0
发表了问答
2015/10/13 17:29

[MODULE_MISS]"zrender/tool/color" is not exists!

color: (function (){ var zrColor = require('zrender/tool/color'); return zrColor.getLinearGradient( 0, 180, 0, 300, [[0, 'green'],[1, 'red']] ) })() 怎么引用这个"color.js"都不对都会出现这个错误 是什么原因呢? 目的是想做一个柱状图 正数与负数的时候颜色能够区分开来...

1
0
发表了问答
2015/06/06 17:28

求助:echart能实现分区域填充不同颜色的折线图吗?

@Kener-林峰 你好,想跟你请教个问题: 项目中要实现一个分区域填充不同颜色的折线图。 如:一个直角坐标系中的折线图,被一个标线分割,标线以上的折线区域显示为红色, 标线以下的折线区域显示为蓝色。 我查阅了Echart的官方文档,没有找到示例和API,只找到一种颜色全部填充 或者 使用 不同颜色渐变填充的做法.但是这种做法无法满足项目需求。 新手上路,请大神不吝赐教啊,多谢!

1
0
发表了问答
2015/03/17 17:40

关于isInside一直返回false问题

@Kener-林峰 你好,想跟你请教个问题: // 矩形 var zrArea = require('zrender/tool/area'); var RectangleShape = require('zrender/shape/Rectangle'); var style = { x : 0, y : 0, width : 100, height : 50, color : 'rgba(135, 206, 250, 0.8)', text:'rectangle', textPosition:'inside' } zr.addShape(new RectangleShape({ style :style , drag...

2
0
发表了问答
2014/10/29 15:58

echarts 力导向图拖拽

@Kener-林峰 请教个问题 就是力导向图假如我拖拽了一个节点到某个位置,放开鼠标能否让节点停留在拖拽完成的位置,不让他弹回去 谢谢。

2
0
发表了问答
2014/11/19 18:47

之前版本的api地址

@Kener-林峰 你好,想跟你请教个问题: 之前版本的api有地址么,现在的这个api没有实例参照,看不大懂

2
0
发表了问答
2014/11/12 17:38

IE8下调用refresh方法图层闪烁

@Kener-林峰 你好,想跟你请教个问题: 关于ZRender在IE8下调用refresh方法所有图层都会闪烁的问题有没有什么方法解决,onmouseover事件时刷新会一直闪烁

1
0
发表了问答
2014/11/10 16:00

ZRender怎么设置图层的悬浮状态

@Kener-林峰 你好,想跟你请教个问题:ZRender怎么设置图层的悬浮状态,类似移动到图层时图层就会自动悬浮显示到最上层出来遮盖住它上面的图层

1
0
发表了问答
2014/10/28 15:31

Group要怎么创建使用

@Kener-林峰 你好,想跟你请教个问题: ZRender中关于Group这个要怎么创建使用

8
0
发表了问答
2014/10/10 10:17

第一:地图上如何打点定位;第二:是否支持到营业厅的地图信息

@Kener-林峰 你好,想跟你请教个问题: 因为初次使用echarts地图,有两个问题: 1、需要再地图上进行定位,不知如何设置,请解答。 2、地图需要到营业厅,营业厅经纬度信息echarts提供吗? 请抽空解答,谢谢!!

8
0
发表了问答
2014/09/23 13:55

zrender源码分析

最近分析了zrender的源码,希望大家给予指导。 http://www.cnblogs.com/hhstuhacker/category/603743.html

1
0
发表了问答
2014/07/21 16:45

dataRange的formatter方法没有生效

@Kener-林峰 你好,想跟你请教个问题:对dataRange的值域范围用文字说明替代数字说明,使用的是dataRange的formatter,但是在页面没有生效。代码如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ include file="/includes/taglibs.jsp" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <head> <meta char...

1
0
发表了问答
2014/04/09 00:52

zrender对流程图支持如何?

@Kener-林峰 你好 zrender有类似"箭头直线"的shape吗,我现在是自己通过折线实现的.想画一个流程图,有什么样的支持吗?

6
1
发表了问答
2013/08/01 18:12

图形之间可以有碰撞检测吗?

@Kener-林峰 你好,想跟你请教个问题:俩个元素之间有碰撞检测吗?还有可以实现连线吗?

2
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
5 评论
92 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部