关于移除 echarts 的 tooltip 的小菱形

太长不看版：设置 tooltip 的 position 属性。

---

 

最近有项目需要大屏展示，所以学了一波 echarts ，在使用过程中，碰到一个需求，就是在离线地图 + 散点图，散点图还需要支持 tooltip。在编写代码过程中，我发现依靠配置只能全局设置 tooltip，无法只在散点图配置中设置 tooltip，这会导致鼠标划入地图中也会显示 tooltip。

经过一番谷歌和文档查阅后，我将 tooltip 的 triggerOn 设为 none，并监听创建 echarts 对应的 dom 元素的 mouseover 和 mouseout 事件。在 mouseover 事件中，我先判断该事件是否是散点图触发，如果是散点图触发，则使用 echarts 的 dispatchAction 函数，设置 type 为 showTip，并设置 seriesIndex、dataIndex。在 mouseout 事件中，我调用 echarts 的 dispatchAction 函数，并将 type 设为 hideTip。以下是部分代码：

    this.chart = echarts.init(document.querySelector('#mapChart'), null, { renderer: 'svg' });
    this.chart.on('mouseover', this.mapMouseover);
    this.chart.on('mouseout', this.mapMouseout);

    mapMouseover(params) {
      const { seriesType, seriesIndex, dataIndex } = params;
      if (seriesType === 'scatter') {
        this.chart.dispatchAction({
          type: 'showTip',
          seriesIndex,
          dataIndex,
        });
      }
    },
    mapMouseout(params) {
      const { seriesType } = params;
      if (seriesType === 'scatter') {
        this.chart.dispatchAction({
          type: 'hideTip',
        });
      }
    },

到此为止，我本以为这样就完成了需求，没想到产品经理觉得不够吸眼球，让美工来重新设计，美工看了看就问我能不能把 tooltip 的小菱形去了。小菱形如图1 所示

图1 小菱形 

我翻了翻文档，文档显示 tooltip 有一个 className 属性，可以让我们修改 tooltip 的样式。试了试，下边的长方形有反应，但是这个小菱形毫无反应，去 dom 一翻，发现这个小菱形是一个独立的 div，但是我确实看见过没有小菱形的 tooltip，于是便去翻阅文档，发现了 tooltip 的 position 属性。想了想，平时见到的 tooltip 通常是在鼠标的斜角方向，便试着将 position 设为 [10,10]，然后进行测试发现，菱形确实消失了，只是这个 tooltip 位置在地图组件距左上角 10px 10px 的位置。细看文档，position 可以使用函数，这个函数会给我们五个参数。按照美工的设计，我使用了 point 、size 参数，其中 point 指鼠标当前位置，size 是个对象，包括 dom 的尺寸和 echarts 容器的当前尺寸。以下是示例代码，效果图如图2 ：

          tooltip: {
            trigger: 'item',
            show: true,
            enterable: true,
            triggerOn: 'none',
            className: 'map-echarts-tooltip',
            position(point, params, dom, rect, size) {
              return [point[0] - size.contentSize[0] / 2, point[1] + 10];
            },
          },

 图2 移除小菱形并设置className修改样式