React下原生G2、Echarts、D3对比-CSDN博客

目的

项目需要大规模数据的展示，所以希望对几款主流的数据可视化数据渲染效率做一个简单的测评，包括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;

复制代码