Three Big chart libraries: Echarts, Bizcharts and G2, how do I choose?

Source: Internet
Author: User



Recently Ali official open source Bizcharts Chart library based on the react technology stack, each of the chart items are in the form of components, close to the use of react features. At the same time Bizcharts is encapsulated based on G2, Bizcharts also inherits G2-related features. The company is currently using the Echarts Chart Library, and the following will analyze the 3 chart libraries.


Bizcharts


Document Address: Bizcharts


1, installation


Introduced through Npm/yarn


npm install bizcharts --saveyarn add bizcharts  --save
2. references


After the successful installation is complete, you can use import or require to reference it.



Example:


import { Chart, Geom, Axis, Tooltip, Legend } from ‘bizcharts‘;
import chartConfig from ‘./assets/js/chartConfig‘;

<div className="App">
    <Chart width={600} height={400} data={chartConfig.chartData} scale={chartConfig.cols}>
      <Axis name="genre" title={chartConfig.title}/>
      <Axis name="sold" title={chartConfig.title}/>
      <Legend position="top" dy={-20} />
      <Tooltip />
      <Geom type="interval" position="genre*sold" color="genre" />
    </Chart>
</div>


In this example, the data configuration of the chart is stored separately in other JS files to avoid the page being too jumbled.


Module.exports = {
     chartData : [
         { genre: ‘Sports‘, sold: 275, income: 2300 },
         { genre: ‘Strategy‘, sold: 115, income: 667 },
         { genre: ‘Action‘, sold: 120, income: 982 },
         { genre: ‘Shooter‘, sold: 350, income: 5271 },
         { genre: ‘Other‘, sold: 150, income: 3710 }
     ],
     // Define the metric
     Cols : {
         Sold: { alias: ‘Sales ‘ }, // Data Field Alias Mapping
         Genre: { alias: ‘game kind ‘ }
     },
     Title : {
         autoRotate: true, // whether automatic rotation is required, the default is true
         textStyle: {
           fontSize: ‘12’,
           textAlign: ‘center’,
           Fill: ‘#999‘,
           fontWeight: ‘bold‘,
           Rotate: 30
         }, // Axis text property configuration
         Position: ‘center’, // title location, **new**
     }
}


Effect preview:


3, DataSet


The data of the icon can be processed by the dataset (Data Processing module) in Bizcharts, which inherits from the G2 and is analyzed in detail later in this article.



Quick Jump


G2


Bizcharts was developed based on G2, and G2 was also practiced in the process of studying bizcharts.


First, installation


As with Bizcharts, it can be introduced through Npm/yarn


npm install @antv/g2 --saveyarn add @antv/g2 --save


Unlike Bizcharts, G2 initialization data is not introduced as a component, but rather requires getting the diagram to be initialized under a DOM. Gets the unique property ID of the DOM, initialized by the chart ().


Second. references


Example:


import React from ‘react‘;
import G2 from ‘@antv/g2‘;
    class g2 extends React.Component {constructor(props) {
        super(props);
        this.state = {
          data :[
            { genre: ‘Sports‘, sold: 275 },
            { genre: ‘Strategy‘, sold: 115 },
            { genre: ‘Action‘, sold: 120 },
            { genre: ‘Shooter‘, sold: 350 },
            { genre: ‘Other‘, sold: 150 }
          ]
        };
    }
componentDidMount() {
         Const chart = new G2.Chart({
           Container: ‘c1‘, // specify the chart container ID
           Width: 600, // specify the width of the chart
           Height: 300 // specify the height of the chart
         });
         Chart.source(this.state.data);
         Chart.interval().position(‘genre*sold‘).color(‘genre‘);
         Chart.render();
     }
render() {
        return (
          <div id="c1" className="charts">
          </div>
        );
    }
}
export default g2;


Third, DataSet


The dataset has two main functions, parsing data (Connector) & Processing data (Transform).



The Official document description is more detailed, can refer to the official website classification:


parse the source data, turn CSV, Dsv,geojson into standard JSON, view connector
Processing data, including filter,map,fold (fill data) and other operations, view transform
Statistical functions, summary statistics, percentages, boxes and other statistical functions, view Transform
Special data processing, including geographic data, rectangular tree, Sankitu, text cloud data processing, view Transform
// step1 creates a dataset specifying the state quantity
Const ds = new DataSet({
  State: {
     Year: ‘2010’
  }
});

// step2 creates a DataView
Const dv = ds.createView().source(data);

Dv.transform({
  Type: ‘filter’,
  Callback(row) {
     Return row.year === ds.state.year;
  }
});

// step3 references DataView
Chart.source(dv);
// step4 update state quantity
ds.setState(‘year‘, ‘2012’);


The following examples are analyzed using the official website documentation



Example One



The data in this form is the number of people of different age groups in the United States, and tabular data is stored in CVS-type files.
Data Link (JSON-type data in the link)


State
less than 5 years old 5-13 years old 14-17 years old 18-24 years old 25-44 years old 45-64 years old 65 years old and above
WY 38253 60890 29314 53980 137338 147279 65614
DC 36352 50439 25225 75569 193557 140043 70648
Vt 32635 62538 33757 61679 155419 188593 86649
... ... ... ... ... ... ... ...


Initializing the data processing module


Import DataSet from ‘@antv/data-set‘;

Const ds = new DataSet({
//state indicates the state quantity of the created dataSet, you can not set it
 State: {
    currentState: ‘WY’
    }
});

Const dvForAll = ds
// Create a data view named populationByAge under the DataSet instance
    .createView(‘populationByAge‘)
/ / Source initializes the chart data, data can be the data result returned by the http request
    .source(data, {
      Type: ‘csv‘, // Load data using CSV type Connector. If it is json type data, you can not set it. The default is json type.
});

/**
Trnasform processing data, you can set the processing type by type, refer to the above api document
The processed data format is
[
{state:‘WY‘,key:‘less than 5 years old’, value:38253},
{state:‘WY‘,key:‘5 to 13 years old’, value: 60890},
]
*/
dvForAll.transform({
    Type: ‘fold’,
    Fields: [ 'less than 5 years old', '5 to 13 years old', '14 to 17 years old', '18 to 24 years old', '25 to 44 years old', '45 to 64 years old', '65 years old and older' ],
    Key: ‘age’,
     Value: ‘population‘
});

//The rest of the transform operation
Const dvForOneState = ds
    .createView(‘populationOfOneState‘)
    .source(dvForAll); // Inherit from full data, the word can also be .source(‘populationByAge‘)
 dvForOneState
     .transform({ // Filter data to filter out the region data that the state matches
    Type: ‘filter’,
    Callback(row) {
      Return row.state === ds.state.currentState;
    }
})
 .transform({
    Type: ‘percent‘,
    Field: ‘population‘,
    Dimension: ‘age’,
    As: ‘percent‘
    });


Drawing with G2
G2-chart API documentation


Import G2 from ‘@antv/g2‘;

// Initialize the chart, id specifies the dom to be inserted in the chart, and other properties set the width and height of the chart.
Const c1 = new G2.Chart({
   Id: ‘c1‘,
   forceFit: true,
   Height: 400,
});
// chart initializes the processed data dvForAll
C1.source(dvForAll);

// Configure the chart legend
C1.legend({
   Position: ‘top‘,
});
/ / Set the axis configuration, the method returns a chart object, the following code represents the data of the axis attribute for the population, converted to data in M units
c1.axis(‘population‘, {
  label: {
    formatter: val => {
      return val / 1000000 + ‘M‘;
    }
  }
});


c1.intervalStack()
   .position(‘state*population‘)
   .color(‘age‘)
   .select(true, {
     Mode: ‘single‘,
     Style: {
       Stroke: ‘red’,
       strokeWidth: 5
     }
   });
/ / When the tooltip changes, trigger the event, modify the state state of the ds, once the state quantity changes, it will trigger the update of the chart, so the c2 pie chart will trigger the change
C1.on(‘tooltip:change‘, function(evt) {
   Const items = evt.items || [];
   If (items[0]) {
   / / Modified currentState is the area of the tooltip touched by the mouse
     ds.setState(‘currentState‘, items[0].title);
   }
});

// draw a pie chart
Const c2 = new G2.Chart({
   Id: ‘c2‘,
   forceFit: true,
   Height: 300,
   Padding: 0,
});
C2.source(dvForOneState);
C2.coord(‘theta‘, {
   Radius: 0.8 // set the size of the pie chart
});
C2.legend(false);
c2.intervalStack()
   .position(‘percent‘)
   .color(‘age‘)
   .label(‘age*percent‘,function(age, percent) {
     Percent = (percent * 100).toFixed(2) + ‘%‘;
     Return age + ‘ ‘ + percent;
   });

C1.render();
C2.render();

Echarts


Echarts is a mature chart library, easy to use, many types of charts, easy to get started. Document resources are also rich, do not repeat here.
Echarts Documentation


Echarts & Bizcharts & G2 Contrast


Comparing the Bizcharts and G2 two chart libraries, the bizcharts is primarily a one-layer package that allows the diagram to be called in the form of components, loading on demand, and making it easier to use.
A simple comparison of the differences between the three chart libraries:



Initialize the chart:
Echarts:


// Initialize the ECharts instance based on the prepared dom
var myChart = echarts.init(document.getElementById(‘main‘));


Bizcharts:


// in the form of a component, combined call
import { Chart, Geom, Axis, ... } from ‘bizcharts‘;

<Chart width={600} height={400} data={data}>
    ...
</Chart>


G2:


// Based on the prepared dom, initialize after configuration
Const chart = new G2.Chart({
     Container: ‘c1‘, // specify the chart container ID
     Width: 600, // specify the width of the chart
     Height: 300 // specify the height of the chart
});
chart.source(data);
chart.render();
 
<div id="c1" className="charts"></div>


Configuration:



Echarts:


// Focus on options for configuration
myChart.setOption({
     Title: {
         ...
     },
     Tooltip: {},
     xAxis: {
         Data: [...]
     },
     yAxis: {},
     Series: [{
         ...
     }]
});


Bizcharts:


/ / According to the needs of the component, after the configuration parameters are assigned
const cols = {...};
const data = {...};
<Chart width={600} height={400} data={data} sca`enter code here`le={cols}>
    ...
</Chart>


G2:


Chart.tooltip({
   triggerOn: ‘...‘
   showTitle: {boolean}, // whether to show title, the default is true
   Crosshairs: {
     ...
     Style: {
       ...
     }
   }
});


Event:



Echarts: Event API documentation


myChart.on(‘click‘, function (params) {
    console.log(params);
});


Bizcharts: Event API documentation


<chart  onEvent={e =>
<chart
  onEvent={e => {
    //do something
  }}
/>
{ //do something }}/>


G2: Event API documentation


chart.on(‘mousedown‘, ev => {});
Summarize


Compared with the above 3 charts, Echarts and bizcharts are relatively easy to use, especially the Echarts configuration is very clear, bizcharts and there are some similarities. The Bizcharts advantage is that the modular form makes the DOM structure relatively clear, on-demand referencing. G2 is more suitable for referencing when a large number of chart interactions are required, and its rich API handles interactive logic in a relatively advantageous position.


Advertised


This article is published in the Mint Front-end weekly, welcome Watch & Star★, reproduced please indicate the source.


Welcome to the discussion, please go again????? ~


Three Big chart libraries: Echarts, Bizcharts and G2, how do I choose?


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.