G2 绘制混合图例 demo

import G2 from '@antv/g2';
import DataSet from '@antv/data-set'; // G2 对数据源格式的要求,仅仅是 JSON 数组,数组的每个元素是一个标准 JSON 对象。
const data = [
{ label: '0.1', 放款应还本金: 2800, 价格: 2800, 收益: 2260, 总收益率: 2 },
{ label: '0.2', 放款应还本金: 1800, 价格: 1800, 收益: 1300, 总收益率: 3 },
{ label: '0.3', 放款应还本金: 950, 价格: 950, 收益: 900, 总收益率: 5 },
{ label: '0.4', 放款应还本金: 500, 价格: 500, 收益: -390, 总收益率: 1 },
{ label: '0.5', 放款应还本金: 170, 价格: 170, 收益: 100, 总收益率: 3 },
{ label: '0.6', 放款应还本金: 170, 价格: 170, 收益: 100, 总收益率: 3 },
{ label: '0.7', 放款应还本金: 170, 价格: 170, 收益: -100, 总收益率: 3 },
{ label: '0.8', 放款应还本金: 170, 价格: 170, 收益: 100, 总收益率: 3 },
{ label: '0.9', 放款应还本金: 170, 价格: 170, 收益: 100, 总收益率: 3 },
{ label: '1.0', 放款应还本金: 170, 价格: 170, 收益: 100, 总收益率: 3 },
{ label: '未评分', 放款应还本金: 170, 价格: 170, 收益: 100, 总收益率: 3 },
];
const ds = new DataSet();
const dv = ds.createView().source(data);
dv.transform({
type: 'fold',
fields: ['放款应还本金', '价格', '收益'], // 展开字段集
key: 'type', // key字段
value: 'value', // value字段
})
const dv1 = ds.createView().source(data);
dv1.transform({ // 附加一个字段类型
type: 'map',
callback(row) { // 加工数据后返回新的一行,默认返回行数据本身
row.rateType = 'a';
return row;
}
});
// Step 1: 创建 Chart 对象
const chart = new G2.Chart({
container: 'mountNode', // 指定图表容器 ID
height: 300, // 指定图表高度
forceFit: true,
animate: false
});
chart.legend({
allowAllCanceled: true
})
const view1 = chart.view();
view1.source(dv); // Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
view1.interval()
.position('label*value')
.color('type', ['#2b6cbb','#41a2fc','#54ca76'])
.label('value')
.adjust('dodge'); const view2= chart.view();
view2.axis('总收益率', {
position: 'right',
grid: null
});
view2.source(dv1);
view2.line().position('label*总收益率').color('rateType', '#fad248').label('总收益率'); // Step 4: 渲染图表
chart.render();
04-07 12:57