echarts tooltip样式修改（2）

最近做了一个需求，UI设计是这样：

我脑袋里想到两种方式：要么用echarts里面的 ----> tooltip -------> formatter来进行设置；要么写个组件，用鼠标事件mouseover和mouseout来控制组件的显示。
但是，我吧，就想用formatter来实现。。。。
关于tooltip的配置如下：

            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
                textStyle: {
                  color: '#ffffff'
                }
              },
              backgroundColor: null,
              // borderColor: '#FCEA00',
              // borderWidth: 1,
              borderRadius: 0,
              padding: [10, 10, 10, 10],
              textStyle: {
                align: 'left',
                fontSize: 14
              },
              formatter: function (v) {
                var str = ''