Ant Design Charts 踩坑

1. 要实现如下的效果

后面详情的部分不知道该如何实现到issue里提问
这种条形图 怎么配置？
按照提示操作应该选择html annotations,但是ant-design-charts文档不友好 只好翻看g2plot文档，借助图形标注展示总计 label annotations position很重要 我这里需要每行的详情标签都显示在最右边，则取里面的最大值去设置annotations position，但是设置html annotation 内存会溢出

{
  html:<div>xxx</div>
}

查阅issue How to show ant design icon inside an annotation of type html? 需要借助ReactDOM渲染dom,但是annotation会变形 不能完全展示，查阅issue则需要设置padding。
最外层的padding一开始以为四个值都要设置，

        padding: [0, 100，0,0]

这样左边的坐标标签就没了，可以只设置两个值，实现右侧有空余，坐标标签不被隐藏

        padding: [0, 100]

实现下来真可谓一波三折