ECharts原理解析


参考资料

  • ECharts官网
  • ECharts: A declarative framework for rapid construction of web-based visualization

ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器,底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

快速构建基于Web的可视化的声明性框架

  • ECharts支持19种内置图表类型:例如,scatterplot, line chart, candle-stick charts, geomap, radar chart, node-link graph, heatmap, tree diagram, sankeydiagram, parallel coordinates, gaugechart, treemap

  • option: Echarts使用一个一体化的JSON格式选项来声明组件、样式、数据和交互,从而形成一个无逻辑和无状态的模式。JSON格式的主要优点在于存储、传输和执行都是安全的,并且易于进一步验证。

  • ECharts 提供了丰富的自定义配置选项,并且能够从全局、系列、数据三个层级去设置数据图形的样式

  • ECharts支持响应式的媒体查询

  • 现代通用图表库需要组件化、可扩展和交互。为了实现这一目标,Echarts引入了流体系结构

  • Echarts使用一个名为 zrender 的渲染引擎来管理渲染元素,并以通用的方式渲染到不同的平台

  • 数据驱动体系

  • 渐进式渲染( incremental rendering ):数据可以被加载并分割成几个小的块(chunks),数据块被逐个推入管道,然后被处理和呈现。

  • 多线程渲染( Multi-Threadrendering ):为了提高新能,我们把数据处理和canvas绘制放在不同的线程中执行,主要利用 web worker 技术

  • ZRender:二维矢量库Zrender,用于图形元素管理、渲染器管理和事件系统。它支持多种渲染后端,包括canvas、svg和vml。

ZRender源码解析

  • 源码目录结构

  • 核心体系:MVC核心封装实现图形仓库、视图渲染和交互控制

    • storage(M):shape数据CURD管理
    • painter(V):canvas元素生命周期管理,视图渲染,绘画,更新控制
    • handler(C):事件交互,实现完整dom事件模拟封装
    • shape:图形实体,分而治之的图形策略,可定义扩展
    • tool:绘画扩展相关实用方法,工具及脚手架
  • ZRender类基本结构

    var ZRender = function (id, dom, opts) {
      opts = opts || {};
      /**
       * @type {HTMLDomElement}
       * @desc 挂载的dom元素
       */
      this.dom = dom;
      /**
       * @type {string}
       * @desc guid中生成唯一id,标记实例
       */
      this.id = id;
    
      var self = this;
      /**
       * @type zrender/Storage
       * @desc 内容仓库 (M)
       */
      var storage = new Storage();
      /**
       * @type string
       * @desc 选择渲染类型:canvas | svg | vml
      */
      var rendererType = opts.renderer;
      /**
       * @type zrender/Painter
       * @desc 绘图容器 (V)
      */
      var painter = new painterCtors[rendererType](dom, storage, opts, id);
      this.storage = storage;
      this.painter = painter;
      /**
       * @type zrender/Handler
       * @desc 事件控制 (C):为封装一层事件代理处理dom操作
      */
      var handerProxy = !env.node && !env.worker ? new HandlerProxy(painter.getViewportRoot()) : null;
      this.handler = new Handler(storage, painter, handerProxy, painter.root);
    };
    /**
     * @desc 动画控制
     */
    this.animation = new Animation({
      stage: {
        update: zrUtil.bind(this.flush, this)
      }
    });
    this.animation.start();
    
  • Storage类的基本结构
    var Storage = function () {
      // 图形(Shape)或者组(Group)添加到到根节点
      this._roots = [];
      /**每次绘制前都会调用更新绘制队列的方法该方法会先深度优先遍历整个树,
       * 更新所有Group和Shape的变换并*且把所有可见的Shape保存到数组中,
       * 最后根据绘制的优先级(zlevel > z > 插入顺序)排序得到绘制队列
      */
      this._displayList = [];
      this._displayListLen = 0;
    };
    
  • 唯一id生成
    var idStart = 0x0907;
    export default function () {
        return idStart++;
    }
    

文章作者: Susie Chang
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Susie Chang !
 上一篇
Vue学习(四)之TypeScript重构 Vue学习(四)之TypeScript重构
参考资料typescript文档 TypeScript基础 TypeScript is a typed superset of JavaScript that compiles to plain JavaScript 概念:Ty
2018-10-29
下一篇 
HTML5脚本编程 HTML5脚本编程
跨文档消息传递(XDM) 跨文档消息传递指的是来自不同域的页面间传递消息 XDM的核心是 postMessage() 方法:接收两个参数,一条消息和一个表示消息接收方来自哪个域的字符串 尝试向内嵌框架中发送一条消息,并指定框架中文档的来源v
2018-10-22 Susie Chang
  目录