bizchart 如何实现g2chart.legend({ position: 'right', radio: {} });

[tiehongji]

BizCharts Version:^4.1.14
Platform:pc
Mini Showcase(like screenshots):
forck and create a demo: https://bizcharts.net/product/BizCharts4/demo/306

[dongsheng (dos)]

bizchart没有注册list-radio相关的交互，手动搞一下，关键代码如下：
`
import ListFocus from '@antv/g2/lib/interaction/action/component/list-focus';
import ListRadio from '@antv/g2/lib/interaction/action/component/list-radio';
import { registerAction } from 'bizcharts';
registerAction('list-radio', ListRadio);
registerAction('list-focus', ListFocus);

export default function xxxxx() {
return (
<div...>
<Chart ...xxxxx>
<Legend position="right" radio={{ tip: '仅看当前' }} />
// 核心是注册个交互
<Interaction
type="legend-filter"
config={{
showEnable: [
{ trigger: 'legend-item:mouseenter', action: ['cursor:pointer', 'list-radio:show'] },
{ trigger: 'legend-item:mouseleave', action: ['cursor:default', 'list-radio:hide'] },
],
start: [
{
trigger: 'legend-item:click',
isEnable: (context: any) => !context.isInShape('legend-item-radio'),
action: ['list-unchecked:toggle', 'data-filter:filter', 'list-radio:show'],
},
// 正反选数据: 只有当 radio === truthy 的时候才会有 legend-item-radio 这个元素
{
trigger: 'legend-item-radio:mouseenter',
action: ['list-radio:showTip'],
},
{
trigger: 'legend-item-radio:mouseleave',
action: ['list-radio:hideTip'],
},
{
trigger: 'legend-item-radio:click',
action: ['list-focus:toggle', 'data-filter:filter', 'list-radio:show'],
},
],
}}
/>
</Chart...>
</div...>
)
}
`
参考文档：
1，antvis/G2@0f85c42
2，https://github.com/alibaba/BizCharts/blob/master/src/components/Legend/actions.ts