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)