G2( bizCharts ) React 绘制混合图例，
// data-set 可以按需引入，除此之外不要引入别的包
import React from 'react';
import { Chart, Axis, Tooltip, Geom, Legend, Label } from 'bizcharts';
import DataSet from '@antv/data-set'; // 下面的代码会被作为 cdn script 注入 注释勿删
// CDN START
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 scale = {
总收益率: {
type: 'linear',
min: 0,
max: 10,
},
}; let chartIns = null; const getG2Instance = chart => {
chartIns = chart;
};
console.log(getG2Instance, 'getG2Instance');
class Demo extends React.Component {
render() {
return (
<Chart
height={400}
width={500}
forceFit
data={dv}
scale={scale}
padding="auto"
onGetG2Instance={getG2Instance}
>
<Legend
custom
allowAllCanceled
items={[
{
value: '放款应还本金',
marker: { symbol: 'square', fill: '#3182bd', radius: 5 },
},
{
value: '价格',
marker: { symbol: 'square', fill: '#41a2fc', radius: 5 },
},
{
value: '收益',
marker: { symbol: 'square', fill: '#54ca76', radius: 5 },
},
{
value: '总收益率',
marker: {
symbol: 'hyphen',
stroke: '#fad248',
radius: 5,
lineWidth: 3,
},
},
]}
onClick={ev => {
const item = ev.item;
const value = item.value;
const checked = ev.checked;
const geoms = chartIns.getAllGeoms();
console.log('geoms', geoms);
for (let i = 0; i < geoms.length; i++) {
const geom = geoms[i];
if (geom.getYScale().field === value && value === '总收益率') {
if (checked) {
geom.show();
} else {
geom.hide();
}
} else if (
geom.getYScale().field === 'value' &&
value !== '总收益率'
) {
geom.getShapes().map(shape => {
if (shape._cfg.origin._origin.type == value) {
shape._cfg.visible = !shape._cfg.visible;
}
shape.get('canvas').draw();
return shape;
});
} const g_shapes = geom.get('labelContainer');
let labels = g_shapes._cfg.labelsGroup._cfg.children;
labels.map(label => {
if (checked) {
if (label._id.includes(value)) {
label._cfg.visible = true;
}
} else {
if (label._id.includes(value)) {
label._cfg.visible = false;
}
}
});
}
}}
/>
<Axis name="label" />
<Axis name="value" position={'left'} />
<Tooltip />
<Geom
type="interval"
position="label*value"
color={[
'type',
value => {
if (value === '放款应还本金') {
return '#2b6cbb';
}
if (value === '价格') {
return '#41a2fc';
}
if (value === '收益') {
return '#54ca76';
}
},
]}
adjust={[
{
type: 'dodge',
marginRatio: 1 / 32,
},
]}
>
<Label content="value" />
</Geom>
<Geom type="line" position="label*总收益率" color="#fad248" size={3}>
<Label content="label" />
</Geom>
</Chart>
);
}
} // CDN END
ReactDOM.render(<Demo />, mountNode);