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