Skip to content
/ wc-g2 Public
generated from hustcc/template

🟪 Web Components for Visualization based on G2.

License

Notifications You must be signed in to change notification settings

hustcc/wc-g2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

wc-g2

2Kb library Web Component for G2.

Build Status npm Version npm Download npm License

Usage

  • Import the Web Component library.
import 'wc-g2';
  • Use the component wc-g2 with spec.
<wc-g2 id="my-chart"></wc-g2>

Set the options of G2.

const chart = document.getElementById('my-chart');

chart.options = {
  type: 'interval',
  data: [
    { genre: 'Sports', sold: 0 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ],
  encode: { x: 'genre', y: 'sold', color: 'genre' },
  style: { minHeight: 50 },
};

How to get the G2 options/spec? see G2 Spec API.

License

MIT@hustcc.