antv g2 notes

Posted 2021-03-23 huahuadavids

1. 全局配置

// 渲染方式用svg,默认是canvas，用svg可以有更好的兼容性和像素显示
G2.Global.renderer = 'svg';

2. 面积图过渡背景色，修改直线图颜色

// 比如2个country，year和value 修改默认的背景色为过渡色
chart.areaStack().position('year*value').
color('country', ['l(90) 0:rgba(254,82,100,0.4)  1:rgba(254,82,100,0);',
'l(90) 0:rgba(255,240,6,0.4) 1:rgba(255,240,6,0)' ]);

// 修改两条折线的颜色 
chart.lineStack().position('year*value').
color('country', ['#FE5264', '#FFF006']).size(2);

3. 一个图表有多个chart

// 新建多个view ，view的方法和chart一样的，可以叠加view

// 折线图 
const view1 = chart.view()
view1.source(data1)
view1.line().position('month*value').
  color('type', ['#FFA900', '#FE5264']).shape('smooth'); // @mark 定义不同颜色line chart

// 柱状图 
const view2 = chart.view()
view2.source(data2)
view2.interval().position('month*value')
          .color('month', ['l(270) 0:#007BC7 1:#00DFFD']); // @mark 柱状图渐变

4. 修改x轴或者y轴

// 这个轴不显示 ,通常是多个view时，某个view的轴不显示 
chart.axis('month', false)

// 修改这个轴的字颜色 修改图表的默认虚线
 view3.axis('value', {
    // label 就是刻度的文字 
    label: {
      textStyle: {
        fill: 'rgba(255,255,255,0.7)'
      }
    },
    grid: {
      type: 'line',
      lineStyle: {
        stroke: 'rgba(255,255,255,0.3)',
        lineWidth: 1, // 网格线的粗细
        lineDash: [4, 0]
      },
    },
  });

5. 多个view公用一个刻度

 // 自定义了value轴 最大值和最小值 ，那么所有的view公用这个刻度 
 chart.scale('value',  {
   min: Math.min(...gaps) - 1,
   max: Math.max(...nums) + 1
 });
   

6.自定义legend

 
 // legend 就是下边的小图例 
 
 chart.legend({
    custom: true,
    clickable: false,
    items: [{
      value: '实体',
      marker: {
        symbol: 'square',
        fill: '#1890FF',
        radius: 5
      }
    }, {
      value: '房贷',
      marker: {
        symbol: 'square',
        fill: '#8c8c8c',
        radius: 5
      }
    },
      {
        value: '往年同期房贷比例',
        marker: {
          symbol: 'square',
          fill: '#4bff39',
          radius: 5
        }
      }

    ]
  });