【Echarts】折现图数据指标过多导致悬浮窗内容超出屏幕的处理方法

场景：

折现图数据指标过多导致悬浮窗内容超出屏幕的处理方法

---

原因分析

图表的数据指标数太多了，echart的悬浮窗每十个一列，例子中有30个，因此为三列，悬浮窗宽度溢出到屏幕外

---

解决方案：

给通用的echart组件配置扩展一个新的配置项 isTipMore
该配置项为 true 时，将echart的 tooltip 配置中 confine 属性更换为 position 属性
具体代码如下

	// 设置悬浮框tooltip
      // other中tooltipIndex传1是使用第一种单位转换，不传是默认不改的，默认全有排序
      // other.isTipMore：为了解决tip中指标数过多的问题， 可选值left right middle，其值代表在页面中布局位置是在屏幕左侧或者右侧
      this.tooltip = {
        // 设置tooltip框自适应
        confine: !this.other.isTipMore,
        position: this.other.isTipMore ? (pos, params, dom, rect, size) => {
            // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
            const obj = { top: 60 }
            if (this.other.isTipMore === 'middle') {
              obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5
            } else if (this.other.isTipMore === 'left') {
              obj['left'] = 5
            } else if (this.other.isTipMore === 'right') {
              obj['right'] = 5
            }
            return obj
        } : null,
        trigger: 'axis',
        ......
        ....
      }
	

对应的引用该组件，需要进行多指标防溢出处理的，增加如下配置

    ....
	data['other'] = {
            name: 'AA',
            unit: '个',
            yUnitShow: true,
            isTipMore: 'right' // 悬浮窗指标过多，增加该属性，right表示相对页面定位在屏幕右侧
          }
	

---

相关资料

echart官文：tooltip.confine属性
echart官文：tooltip.position属性