echart图例文字显示不下，echart图例文字显示不下鼠标悬浮显示详情

可以看到，即使图例已经分页，但是还是存在内容显示不下的情况

理想的处理方案，单行隐藏，鼠标悬浮显示详情

怎么实现

// 文字图例
        legend: {
          type: this.flag ? 'plain' : 'scroll',
          orient: this.flag ? "vertical" : 'horizontal',
          pageIconColor: this.isCsCtrl ? 'rgba(245, 239, 239, 1)' : 'rgba(47, 69, 84, 1)', //翻页按钮颜色
          pageIconInactiveColor: this.isCsCtrl ? 'rgba(108, 105, 105, 1)' : 'rgba(170, 170, 170, 1)', //翻页按钮不激活时的颜色
          pageTextStyle: {
            color: this.isCsCtrl ? 'rgba(213, 209, 209, 1)' : 'rgba(51, 51, 51, 1)' // 翻页信息的文字颜色
          },
          icon: "circle",
          itemGap: this.flag ? 5 : 20,
          itemWidth: 8,
          itemHeight: 8,
          tooltip: {
            show: true,
            formatter: (params) => {
              let data = option.series[0].data.find(item => item.name === params.name);
              return `${params.name}     ${data.value}%`;
            }
          },
          textStyle: {
            fontSize: 14,
            lineHeight:  20,
            color: 'rgba(255,255,255,0.70)' 
          },
          formatter:function (name) {
            let data = option.series[0].data.find(item => item.name === name);
            return `${name}     ${data.value}%`;
          } : null
        }

关于可视化配置的延伸

已echart为例，echart中，图表有以下配置项：tooltip，legend，series，… 但是在legend中其实是可以进行tooltip属性配置的