Echarts内graphic元素tooltip无法展示或内容错误发现了Echarts内graphic元素tooltip

最近在搞一些Echarts的需求，需求是横向的柱状图，要求柱状图可以横向拖动改变数值。

大致就是这么一个东西

当时翻了翻echarts的例子以及互联网的解决办法后，选择了使用graphic进行拖拽功能的实现；在正常绘制柱状图的基础上，在柱子上盖一个graphic元素来响应拖拽事件；通过监听拖拽事件获取位置及位置对应的值来改变柱子的位置；

{
        type: "rect",
        id: treeOption.yAxis[0].data[dataIndex],
        name: treeOption.yAxis[0].data[dataIndex],
        position: [position[0] - offset, position[1]],
        shape: {
                width: offset,
                height: shapeHeight
        },
        style: {
                fill: 'transparent',
                stroke: 'red',
                lineWidth: 1
        },
        cursor: 'ew-resize',
        invisible: false,
        draggable: "horizontal",
        ondrag: function (dx, dy) {
                onSidePointDragging('left', dataIndex, [this.x, this.y]);
        },
        z: 100
}

graphic元素的大致配置就是这样，功能都可以实现，但是问题出现在了tooltip上；

非graphic元素时，tooltip是这样的

正常的tooltip

当鼠标悬浮到graphic元素上时，tooltip变成了这样

不正常的tooltip

而且问题是，我在tooltip里增加了formatter的配置，没起作用！！加的console啥的完全没用！！

通过手动dispatchAction展示tooltip倒是可以进到tooltip的formatter里了，然而展示的内容还是不变，看起来像是被什么东西给顶掉了一样。

在折磨了我三几个小时后，终于没了办法的我选择去看看Echarts的源码。通过搜索关键词，找到了这么个东西

先甭管它是啥，有个tooltip，还有tooltipOption，看起来八成有关系

这玩意不就是graphic元素嘛，那么它的tooltip属性又是哪里来的？？？

不知道，我仔仔细细的翻了翻文档，没有相关的内容，但是源码里有。

写上试试

{
type: "rect",
id: treeOption.yAxis[0].data[dataIndex],
name: treeOption.yAxis[0].data[dataIndex],
position,
shape: {
        width,
        height: shapeHeight
},
style: {
        fill: 'transparent',
        stroke: 'black',
        lineWidth: 1
},
invisible: false,
draggable: "horizontal",
tooltip: {
        formatter(p) {
                const options = treeChart.getOption();
                const params = options.series.map((item, index) => ({
                        name: p.name,
                        color: options.color[index],
                        seriesName: item.name,
                        value: item.data[options.yAxis[0].data.findIndex(ele => ele === p.name)]
                }));
                console.log('graphic', p, params)
                let str = `<div style="font-size:14px;color:#666;font-weight:400;line-height:1;">${params[0].name}</div>`;
                str += '<div style="margin: 10px 0 0;line-height:1;">';
                for (let i = 0; i < params.length; i++) {
                        const item = params[i];
                        str += `<div style="margin: ${i > 0 ? 10 : 0}px 0 0;line-height:1;">
                                <div style="margin: 0px 0 0;line-height:1;">
                                        <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${item.color};"></span>
                                        <span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">${item.seriesName}</span>
                                        <span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">${Math.abs(item.value)}</span>
                                        <div style="clear:both"></div>
                                </div>
                                <div style="clear:both"></div>
                        </div>`;
                }
                str += '<div style="clear:both"></div></div>';
                return str;
        }
}

于是我照抄了一份echarts默认的tooltip的样式，搞了进去

成了！

虽然不知道为啥，它成了。

事实证明，文档里没写的东西，有时候翻翻源码或许会有新的收获；

Echarts内graphic元素tooltip无法展示或内容错误

成了 ！

成了！