angualr使用g2

g2是一套基于可视化编码的图形语法，真正做到了让数据驱动图形，不用关心绘图细节。

下载g2包

npm install @antv/g2 --save

在要使用的组件中引入

import G2 from '@antv/g2/build/g2';
export class DemoComponent implements OnInit 
{
  constructor() {
    this.bar()
  }

  bar() {
    var data = [{
      year: '1951 年',
      sales: 38
    }, ...]
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight
    });
    //数据
    chart.source(data);
    //度量配置
    chart.scale('sales', {
      tickInterval: 20
    });
    chart.interval().position('year*sales');
    chart.render();
  }
   
}

页面使用

参考官网：
https://antv.alipay.com/zh-cn/g2/3.x/index.html

g2图表示例网站：
http://antvis.github.io/g2/demo/index.html

<div id="mountNode"></div>

创建 Chart 图表

new G2.Chart({
  container: {string} | {HTMLDivElement},//对应图表的 DOM 容器
  width?: {number},   //图表宽度
  height?: {number},   //图表高度
  padding?: {object} | {number} | {array},  //图表的内边距
  background?: {object}, //设置图表整体的边框和背景样式，是一个对象
  plotBackground?: {object}, //图表绘图区域的边框和背景样式，是一个对象
  forceFit?: {boolean},//图表的宽度自适应开关，默认为 false，
  animate?: {boolean},//图表动画开关，默认为 true
  pixelRatio?: {number}, //设置设备像素比，默认取浏览器的值 window.devicePixelRatio。
  data?: {array} | {DataSet.View},//设置图表的数据源，建议使用 chart.source(data) 设置数据源。
  theme?: {string} | {object},//设置当前图表的主题，
  renderer?: {string}, //设置当前图表的使用的渲染方案
});

background配置

background: {
  fill: {string}, // 图表背景色
  fillOpacity: {number}, // 图表背景透明度
  stroke: {string}, // 图表边框颜色
  strokeOpacity: {number}, // 图表边框透明度
  opacity: {number}, // 图表整体透明度
  lineWidth: {number}, // 图表边框粗度
  radius: {number} // 图表圆角大小
}

plotBackground配置

plotBackground: {
  fill: {string}, // 图表背景色
  fillOpacity: {number}, // 图表背景透明度
  stroke: {string}, // 图表边框颜色
  strokeOpacity: {number}, // 图表边框透明度
  opacity: {number}, // 图表整体透明度
  lineWidth: {number}, // 图表边框粗度
  radius: {number} // 图表圆角大小
}

更多配置参考api文档

https://www.yuque.com/antv/g2-docs/api-g2

刻度百分比展示

chart1.point().position('year*value').label('value', {
      formatter: val => {
        return val + '%';//y轴显示百分比
      }
    }).size(6).shape('hollowCircle').style({
      // stroke: '#fff',
      lineWidth: 1
    });

转载于:https://www.jianshu.com/p/42027a196149