g2文档整理

1. 渐变色

G2 中提供了线性渐变、放射状 / 环形渐变两种形式，使用方式如下：

• 线性渐变

// 使用渐变色描边，渐变角度为 0，渐变的起始点颜色 #ffffff，中点的渐变色为 #7ec2f3，结束的渐变色为 #1890ff
stroke: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff';

• 放射状 / 环形渐变

// 使用渐变色填充，渐变起始圆的圆心坐标为被填充物体的包围盒中心点，半径为(包围盒对角线长度 / 2) 的 0.1 倍，渐变的起始点颜色 #ffffff，结束的渐变色为 #1890ff
fill: 'r(0.5, 0.5, 0.1) 0:#ffffff 1:#1890ff';

2. Transform 数据转换

fold 字段展开

以指定字段集为 key，展开数据。

示例：

const dv = new DataSet().createView().source(data).transform({
        type: 'fold',
        fields: ['首套房贷', '二套房贷'], // 展开字段集
        key: 'type',//key字段
        value: 'value'//value字段
      })

const data = [
        { yrar: 2018, '首套房贷': 2000, '二套房贷': 5000 },
        { yrar: 2019, '首套房贷': 4700, '二套房贷': 8000 },
        { yrar: 2020, '首套房贷': 5000, '二套房贷': 9000 }
]

dv.rows 变为
[
 	{yrar: 2018, type: "首套房贷", value: 2000}
	{yrar: 2018, type: "二套房贷", value: 5000}
	{yrar: 2019, type: "首套房贷", value: 4700}
	{yrar: 2019, type: "二套房贷", value: 8000}
	{yrar: 2020, type: "首套房贷", value: 5000}
	{yrar: 2020, type: "二套房贷", value: 9000}
]

percent 总和百分比

统计某个维度下某个字段的值的和占总和的比例（可以分组）。

field 是统计发生的字段（求和，求百分比），dimension 是统计的维度字段，也就是"每个不同的 dimension 下，field 值占总和的百分比"，groupBy 则是分组字段，每一个分组内部独立求百分比（每一个分组内，最后的 percent 字段相加之和为 1）。

具体用法见示例：

 const ds = new DataSet()
 const dv = ds
        .createView()
        .source(data)
        .transform({
          type: 'percent',
          field: 'value', // 统计销量
          dimension: 'country', // 每年的占比
          groupBy: ['year'], // 以不同产品类别为分组，每个分组内部各自统计占比
          as: 'percent'//结果存储在 percent 字段
        })
        

const data=[
	  {country: '实体',year: '12/07',value: 111},
      {country: '房贷',year: '12/07',value: 502}
]

dv.rows变为：
[
	{country: "实体", year: "12/07", value: 111, percent: 0.18107667210440456},
	{country: "房贷", year: "12/07", value: 502, percent: 0.8189233278955954}
]

3. legend不出现

有时候绘制chart图表的时候, legend图例不出来, 可能是因为设置color的时候没有设置字段名.color('type',xxx)