antv g2字体阴影_antv g2 notes

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

}

}

]

});