当你的才华还撑不起你的梦想时,你只能一直前进!

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 // 这里也可以通过调用其他自定义函数的方式,去对数据进行更深层次的变换
                }
            })

 

posted @ 2020-11-13 15:16  One'-_-'Piece  阅读(3923)  评论(0编辑  收藏  举报