Incubator-echarts: tooltip使用formatter后，类目值前面的有色圆点就没了

[chenxia123]

问题简述 (One-line summary)

tooltip使用formatter后，类目值前面的有色圆点就没了。

版本及环境 (Version & Environment)

• ECharts 版本 (ECharts version):
• 浏览器类型和版本 (Browser version):chrome;版本 54.0.2840.87 m
• 操作系统类型和版本 (OS Version):windows10

重现步骤 (Steps to reproduce)

1.
2.

期望结果 (Expected behaviour)

tooltip使用formatter后，各类目值前面的圆点都还在

可能哪里有问题 (What went wrong)

ECharts配置项 (ECharts option)

option = {
tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
      },
      formatter: params => (`${params[0].name}<br/>${params[0].seriesName}:${params[0].value}<br/>${params[1].seriesName}:${(params[1].value + params[0].value)}`),
    },
    grid: {
      left: '3%',
      right: '8%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'value',
        name: '(/万)',
        nameTextStyle: {
          color: '#838F9A',
          fontSize: 14,
        },
        axisLabel: {
          textStyle: {
            color: '#838F9A',
            fontSize: 14,
          },
        },
        axisLine: {
          lineStyle: {
            color: '#282f3b',
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: '#282f3b',
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        name: '项目名称',
        nameTextStyle: {
          color: '#838F9A',
          fontSize: 14,
        },
        nameGap: 15,
        data: trustNames,
        axisLabel: {
          textStyle: {
            color: '#838F9A',
            fontSize: 14,
          },
        },
        axisLine: {
          lineStyle: {
            color: '#282f3b',
          },
        },
        splitLine: {
          lineStyle: {
            color: '#282f3b',
          },
        },
      },
    ],
    series: [
      {
        name: '资金余额',
        type: 'bar',
        itemStyle: {
          normal: {
            color: '#00CC99',
          },
        },
        stack: 'one',
        data: balances,
      },
      {
        name: '放款规模',
        type: 'bar',
        itemStyle: {
          normal: {
            color: '#0066CC',
          },
        },
        stack: 'one',
        data: remainAmounts,
      },
    ],
  };

  return { option, trustNames };
}

其他信息 (Other comments)

[pissang]

formatter 相当于把默认的 tooltip 提示框给覆盖了，所以小圆点也不在了，你可以自己再在 formatter 里加上

[chenxia123]

嗯嗯 已经解决了，谢谢！

[fatbigbright]

请问如何通过fomatter把那个小圆点加回来？

[fatbigbright]

自问自答：先把triggerOn设置成‘click’，这样鼠标点击出现tooltip，再移开后悬浮层不会消失，再用开发者工具定位小圆点的span元素，把它的html复制到formatter内容后再做设置。多谢！！！

[Fairyshi]

  tooltip : {
    trigger: 'axis',
    axisPointer: {
        animation: false
    },
    formatter: function (params) {
      var colorSpan = color => '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + '"></span>';
      let rez = '';
      params.forEach(item => {
        let num = item.value - base;
        if (num >= 1000){
          num = format(String(num));
        }
        let strItem = '<p>' + colorSpan(item.color) + num + '</p>';
        rez += strItem;
      });
      //https://github.com/ecomfe/echarts/commit/86bcb9a87bcc568d7ef6427aba45ec105f0d0bee
      return rez;
    }        
  },

[peterchealse]

cool

[genezx]

echarts.format.getTooltipMarker(params.color)

[fengdihuahua]

params.marker

[AomoriL]

formatter: params => `<p>${params.marker}${params.percent}%&nbsp;&nbsp;${params.name}</p>`,