G2 绘制混合图例 demo

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();