瞭解 ZRender

前言

ZRender(https://github.com/ecomfe/zrender) 是二維繪圖引擎，是輕量級的 Canvas 類庫，它提供 Canvas、SVG、VML 等多種渲染方式，它可以用於繪製各種圖形，包括線條、矩形、圓形、多邊形等。ZRender 也是 ECharts(http://echarts.baidu.com/) 的渲染器。在 ZRender 的基礎上開發的專門用於可視化數據的庫，它提供了很多預定義的圖表類型，如折線圖、柱狀圖、散點圖、餅圖等，同時還支持動態更新數據和交互事件。

一、ZRender

1. ZRender 的特性

ZRender 提供了以下主要特性：

  1. 輕量級：ZRender 是一個輕量級的繪圖庫，它的代碼大小隻有 100KB 左右，可以快速地加載並運行。

  2. 高性能：ZRender 可以在大規模數據的情況下保持高性能，能夠支持高速繪製大量的圖形元素。

  3. 易擴展：ZRender 提供了一系列的擴展機制，可以方便地添加新的圖形元素、渲染器和事件處理器等。

  4. 多種圖形元素支持：ZRender 支持多種圖形元素，包括線段、矩形、圓形、文本、圖片、路徑等，可以滿足各種繪圖需求。

  5. 多種渲染器支持：ZRender 支持多種渲染器，包括 Canvas 渲染器、SVG 渲染器和 WebGL 渲染器等。

  6. 豐富的事件處理機制：ZRender 提供了豐富的事件處理機制，可以方便地處理用戶交互事件，包括鼠標點擊、鼠標移動、鍵盤事件等。

ZRender 的優勢 相比於其他繪圖庫，ZRender 具有以下優勢：

  1. 性能優越：ZRender 能夠快速地繪製大量的圖形元素，具有較高的性能，可以滿足大規模數據的繪圖需求。

  2. 擴展性強：ZRender 提供了豐富的擴展機制，可以方便地添加新的圖形元素、渲染器和事件處理器等，具有很強的靈活性。

  3. 使用方便：ZRender 的 API 簡單易懂，使用方便，可以快速上手。

  4. 跨平臺支持：ZRender 支持多種渲染器，可以在不同的平臺上運行，具有很好的跨平臺支持性。

2. 基本用法

2.1  安裝 ZRender
npm install zrender --save
2.2  創建畫布

在這個例子中，我們創建了一個 div 元素，並將其添加到頁面中。然後使用 ZRender 的 init 方法初始化畫布，將其賦值給變量 zr。

const canvas = document.createElement('div');
document.body.appendChild(canvas);

const zr = zrender.init(canvas);
2.3  繪製圖形

ZRender 可以繪製各種圖形，例如矩形、圓形、文本等。在這個例子中，我們創建了一個矩形對象，設置其座標、寬度、高度和填充顏色，並通過 zr.add 方法將其添加到畫布中。下面是繪製一個矩形的代碼示例：

const rect = new zrender.Rect({
  shape: {
    x: 100,
    y: 100,
    width: 400,
    height:300,
  },
  style: {
    fill: "green",
    stroke: 'black',
    lineWidth:3
  }
});

zr.add(rect);

2.4  修改圖形元素屬性
const rect = new zrender.Rect({
  shape: {
    x: 100,
    y: 100,
    width: 400,
    height:300,
  },
  style: {
    fill: "green",
    stroke: 'black',
    lineWidth:5
  }
});

zr.add(rect);
console.log(rect.shape.width); // 400
rect.attr('shape', {
    width: 50 // 只更新 width。其餘將保持不變。對於組或者整個zrender對象重繪調用dirty()方法觸發
});

2.5  實現交互效果

ZRender 提供了事件系統，可以方便地實現交互效果。在這個例子中，我們爲矩形添加了一個點擊事件，在點擊矩形時會打印出一條消息。例如，我們可以爲矩形添加點擊事件：

const rect = new zrender.Rect({
  shape: {
    x: 100,
    y: 100,
    width: 400,
    height:300,
  },
  style: {
    fill: "green",
    stroke: 'black',
    lineWidth:5
  }
});


rect.on('click', () => { //.off()取消綁定事件
  console.log('rect clicked');
});

zr.add(rect);

2.6 繪製柱狀圖
const zr = zrender.init(chartRef.current);

const rectWidth = 30;
const rectGap = 10;
const rectCount = data.length;

const maxData = Math.max(...data);
const rectHeight = 200;

for (let i = 0; i < rectCount; i++) {
  const rect = new zrender.Rect({
    shape: {
      x: i * (rectWidth + rectGap),
      y: rectHeight - data[i] / maxData * rectHeight,
      width: rectWidth,
      height: data[i] / maxData * rectHeight,
    },
    style: {
      fill: '#66ccff',
      stroke: 'black',
      lineWidth:5
    },
  });

  zr.add(rect);
}

在這個例子中，我們創建了一個 柱狀圖組件，它接收一個數據數組作爲 props。在組件中，我們使用 useRef 創建一個 ref，用來保存畫布的 DOM 元素。然後在 useEffect 中，我們使用 ZRender 創建畫布，並根據傳入的數據繪製矩形。最後將畫布添加到 DOM 中。在組件的返回值中，我們將 ref 綁定到一個 div 元素上，並設置其寬度和高度。這樣就可以在頁面中顯示出柱狀圖了。

3. 使用場景

由於 ZRender 是 ECharts 的底層引擎，因此在使用 ECharts 的時候，ZRender 是自動加載的，用戶無需額外操作。不過，有些情況下可能需要直接使用 ZRender 來繪製圖形或實現交互功能。

代碼示例：

const zr = zrender.init(chartRef.current);
const myChart = echarts.init(zr);

myChart.setOption({
  backgroundColor: 'rgba(0,0,0, .6)',
  xAxis: {
    type: 'category',
    boundaryGap: ['0', '10%'],
    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
  },
  yAxis: {
    type: 'value',
    boundaryGap: ['0', '10%'],
    axisTick: { show: false },
    axisLine: {
      lineStyle: {
        color: 'rgba(255,255,255,.1)'
      }
    },
  },
  series: [
    {
      name: '2021年',
      type: 'bar',
      barWidth: '25%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: 'rgba(207, 102, 114, 1)'
            },
            {
              offset: 1,
              color: 'rgba(142, 194, 31, 1)'
            }
          ],
          false
        )
      },
      data: [103456, 120056, 123006, 123400, 120450, 103056]
    }
  ]
 )}

 zr.dispose();

在這個例子中，我們創建了一個漸變柱狀圖組件，它接收一個數據數組作爲 props。在組件中，我們使用 useRef 創建一個 ref，用來保存畫布的 DOM 元素。然後在 useEffect 中，我們使用 ZRender 創建畫布，並將畫布實例傳給 ECharts 的初始化函數，創建一個 ECharts 實例。在 ECharts 實例中，我們使用 setOption 方法來設置圖表的配置選項，其中包括 X 軸、Y 軸和柱狀圖數據等內容。在組件的返回值中，我們將 ref 綁定到一個 div 元素上，並設置其寬度和高度。這樣就可以在頁面中顯示出柱狀圖。在組件銷燬時，我們還需要調用 ECharts 和 ZRender 實例的 dispose 方法，以釋放資源。這樣可以避免內存泄漏的問題。

以下是一些 ZRender 和 ECharts 交叉使用場景：

  1. 高性能的繪圖需求

    由於 ECharts 負責繪製的圖表組件比較多，每個組件都要進行計算和渲染，因此對於某些特別複雜的圖表，ECharts 可能會出現性能問題。這時可以使用 ZRender 直接繪製圖形，通過優化性能實現更好的效果。

  2. 自定義圖形和交互效果

    ECharts 封裝了很多圖表組件和交互功能，但是某些時候用戶可能需要自定義圖形或交互效果。這時可以使用 ZRender 直接在 ECharts 圖表上添加自定義的圖形或交互效果，以實現特定的需求。

  3. 與其他第三方庫的集成

    有些時候，用戶可能需要將 ECharts 圖表嵌入到其他第三方庫中，或者在其他第三方庫中實現與 ECharts 圖表的交互。這時可以使用 ZRender 直接操作圖形元素，以實現與其他庫的集成。

總的來說，ZRender 和 ECharts 可以在很多場景下交叉使用，提供更加豐富和靈活的前端可視化方案。

二、Echarts

1. Echarts 的特性

  1. 多種圖表類型：ECharts 支持多種常見的圖表類型，包括折線圖、柱狀圖、餅圖、散點圖、地圖等。

  2. 強大的交互性：ECharts 提供了多種交互方式，包括縮放、拖拽、選取、聯動等。

  3. 支持多種數據格式：ECharts 支持常見的數據格式，包括 JSON、數組等。

  4. 可定製性：ECharts 支持多種樣式定製方式，包括全局樣式、主題、數據項樣式等。

  5. 數據視覺化處理：ECharts 提供多種數據視覺化處理方式，包括數據映射、漸變色等。

  6. 跨平臺：ECharts 可以運行在各種瀏覽器、操作系統和移動設備上。

  7. 社區活躍：ECharts 有一個活躍的社區，用戶可以從社區中獲取技術支持和資源。

2. demo 圖片示例

echarts 的官方示例已經很完善，此處暫時只貼一些個人比較感興趣的練習 demo 圖片示例：

三、參考文檔

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/6elKOwjUIpUHQMZvHC_wLA

猜你喜歡