React下原生G二、Echarts、D3對比

時間 2019-11-06

標籤 react 原生 echarts d3 對比欄目 React 简体版

原文原文鏈接

目的

項目須要大規模數據的展現，因此但願對幾款主流的數據可視化數據渲染效率作一個簡單的測評，包括G二、Echarts和D3,同時G2和Echarts都有對React框架進行封裝的的版本，這裏選擇了使用原生的javascript

環境

測試方向：本文只在react下對G2，Echarts,和D3進行對比：一條折線的渲染速度
運行環境：chrome訪客模式（防止瀏覽器插件對結果形成影響）
數據量：1K,10K,100K,1Mjava

庫	包	版本
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~~有種"我就是神"的掌控感react

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;

複製代碼