React下原生G2、Echarts、D3對比

聾long發表於2019-03-22
ReactEcharts

目的

專案需要大規模資料的展示，所以希望對幾款主流的資料視覺化資料渲染效率做一個簡單的測評，包括G2、Echarts和D3,同時G2和Echarts都有對React框架進行封裝的的版本，這裡選擇了使用原生的

環境

測試方向：本文只在react下對G2，Echarts,和D3進行對比：一條折線的渲染速度
執行環境：chrome訪客模式（防止瀏覽器外掛對結果造成影響）
資料量：1K,10K,100K,1M

庫 包 版本
G2 @antv/g2 ^3.4.10
Echarts echarts ^4.1.0
D3 d3 ^5.9.2

程式碼

從程式碼上可以看出：G2和Echarts的實現方式上大致差不多，都是需要先將標籤渲染在頁面上，再對標籤進行操作，所以需要在render之後，也就是需要在componentDidMount()這個生命週期中進行操作，實現上來看G2和Eharts都提供了相似的介面吧實現上比較簡單，然後以為Ｇ2和Eharts都預設開啟animetion(animate)和tooltip,因為只單純測試渲染效能所以手動關掉
然後說D3,真的太坑了，學習曲線很陡峭，國內D3的資料也比較少，而且跟不上版本，只能看英文文件，實踐起來也比較麻煩，基本上每條線每個點都需要手動繪製，但是，自由度極高，功能強大，基本上可以實現任何你想要的效果,emm~~有種"我就是神"的掌控感

G2

import React, { Component } from 'react';
import G2 from '@antv/g2';
class LineChartG2 extends Component {
  componentDidMount() {
    const { data } = this.props;
    const height = 300;
    const width = 1000;

    var chart = new G2.Chart({
      container: document.getElementById('line'),
      animate: false,
      height,
      width,
    });
    chart.source(data);
    chart.axis('data', {
      title: "data",
    });
    chart.axis('value', {
      title: "value",
    });
    chart.tooltip(false)
    chart.line().position('data*value');
    chart.render()
  }
  render() {
    return (
      <div id="line" />
    );
  }
}

export default LineChartG2;


複製程式碼

Echarts

import React, { Component } from 'react';
import echart from 'echarts'
class LineChartEchart extends Component {
  componentDidMount() {
    const { data} = this.props;
    var lineChart = echart.init(document.getElementById("lineEchart"))
    const key = Object.keys(data)
    lineChart.setOption({
      tooltip: false,
      xAxis: {
        data:key
      },
      yAxis: {},
      grid: {
        x: 100,
        x2:0
      },
      series: [{
        name: 'x',
        type: 'line',
        data,
        symbol: 'none'
      }],
      animation:false,
    })
  }
  render() {
    return (
      <div id="lineEchart" style={{ width: 1000, height: 300 }} />
    );
  }
}

export default LineChartEchart;

複製程式碼

D3

import React, { Component } from 'react';
import * as d3 from 'd3';

class LineChartD3 extends Component {

  componentWillMount() {
  }
  componentDidMount() {
    const { data } = this.props
    console.log(data)
    const width = 1000
    const height = 300
    const padding = { top: 40, left: 40, right: 40, bottom: 40 }
    const pathwidth = width - padding.left - padding.right
    const pathheight = height -padding.top-padding.bottom

    d3.select("#line")
      .append("svg")
      .attr("width", width)
      .attr("height", height)


    // 放大器
    var scaleX = d3.scaleLinear()
      .domain([0,data.length]).nice()
      .range([0, pathwidth])

    var scaleY = d3.scaleLinear()
      .domain([0,d3.max(data)]).nice()
      .range([ pathheight,0])

    var lineGengeator = d3.line()
      .x(function (d, i) {
        return scaleX(i)
      })
      .y(function (d) {
        return scaleY(d)
      })

    const x = d3.axisBottom(scaleX)
    const y = d3.axisLeft(scaleY)
    // x折線
    d3.select("svg")
      .append("path")
      .style("fill", "none")
      .style("stroke", "#212121")
      .attr("d", lineGengeator(data))
      .attr("transform", `translate(${padding.left+1},${padding.top})`)
    // X軸
    d3.select("svg")
      .append("g")
      .attr("transform", `translate(${padding.left},${height - padding.bottom})`)
      .call(x)
    // y軸
    d3.select("svg")
      .append("g")
      .attr("transform", `translate(${padding.left},${padding.top})`)
      .call(y)

  }
  render() {
    return (
      <div id = "line">
      </div>
    );
  }
}

export default LineChartD3;

複製程式碼

效果

下圖是３種庫的實現效果：

看起來G2和Echarts更好看一些，D3更單薄一些，是因為對D3在樣式上並沒有做很多的設定，而G2和Echarts的樣式都是預設的

效果對比.jpg

測試方法

簡單粗暴：chrome訪客模式F12Performance下檢視重新整理時間，大概是下面這個樣子:

測試例項.jpg

結果

以下的結果是取１0次測試結果平均數：單位/ms

數量級 G2 Echarts D3
1K 221.12 251.21 196.88
10K 349.66 419.98 223.68
100K 991.35 1250.24 376.37
1M Maximum call stack size exceeded 頁面崩潰 1930.59

G2資料量超過一個界限就會報錯,大概120K到130K之間

Echarts早期１Ｍ資料執行還可以的，但是後來測的時候資料量400K到500K的時候會導致頁面崩潰（奇怪）

總結

從結果來看就是D3資料量大的時候明顯渲染速度要比G2和Echarts快很多，但是考慮到其實G2和Echarts其實裡邊預設定義了一些樣式和屬性，而D3就是寫什麼是什麼，而且試驗中用到的資料樣本每一次測試都是生成一定數量的隨機數，所以測試結果只是能描述個大概

看起來G2和Echarts在渲染效能上差不太多，G2稍快一點（結果是以ms為單位的所以實際感受上並沒有很大的差別），但是Echarts存在的時間比較早了可能功能上會更勝一籌吧，同時他們學習曲線相對比較平緩一點

D3毫無疑問在渲染速度方面碾壓G2和Echarts，但是學習曲線很陡峭，國內D3的資料也比較少，樣式上來說G2和Echarts會更容易做的漂亮一點，而D3所有的引數都需要自己設定，所以想要做得漂亮也不是很容易，不過D3熟練度上來後準定可以做到很多G2和Echarts做不到的事

原始碼： github.com/hellokidder…

要是能給個小星星就完美了

相關文章