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

[boydos]

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，https://github.com/antvis/G2/pull/3786/commits/0f85c42a6fb58e958985d45db3a09c0f0a306ae4# 2，https://github.com/alibaba/BizCharts/blob/master/src/components/Legend/actions.ts