AntV G2 toolTip 自定义显示
chart.tooltip({ showCrosshairs: true, // 展示 Tooltip 辅助线 shared: true, showMarkers: true, itemTpl: ` <div style="margin-bottom: 10px;list-style:none;"> <span style="background-color:{color};" class="g2-tooltip-marker"></span> {name}: {value} </div> ` // 自定义 toolTip 样式 });
chart.line().position('x*y').color('#1890ff').tooltip('x*a', (x,a) => { // tooltip的第一个参数写上需要显示的字段'item1*item2*...';第二个参数为一个函数,该函数的参数为需要显示的字段。 return { name: '自定义', // 可自定义显示 默认为传入的值 value: a // 这里也可以通过调用其他自定义函数的方式,去对数据进行更深层次的变换 } })
不要只满足于世界的表象,要勇于探索未知的可能