【解决】Echarts柱状图上tooltip提示框里面的文字前面的圆点颜色及大小调整

【问题】

调整Echarts柱状图上tooltip提示框里面的圆点颜色及大小（默认情况下该圆点颜色是与柱状图颜色保持一致的）。

如下图：

【解决】

示例代码如下（tooltip下面的trigger类型要为item）：

tooltip: {
  trigger: 'item', // tooltip下面的trigger类型要为item
},
 
// ......
 
series: [
  {
    name: 'XXXX',
    type: 'bar',
    barWidth: '60%',
    data: [10, 52, 200, 334, 390, 330, 220],
    tooltip: {
       formatter:function() {
        return '<span style="display:inline-block;margin-right:5px;border-radius:100px;width:100px;height:100px;background-color:yellow"></span>'
       }
    },
  }
]复制

示例效果如下：

实际开发过程中还要兼顾到圆点以及后面的文字介绍，示例代码如下：

formatter: function(params) {
    var result = ''
    var dotaDta = '<span style="display:inline-block;margin-right:5px;border-radius:100px;width:100px;height:100px;background-color:#666"></span>'
    var dotaDta2 = '<span style="display:inline-block;margin-right:5px;border-radius:100px;width:100px;height:100px;background-color:#888"></span>'
    result += params[0].axisValue + "</br>" + dotaDta +'第一行文字介绍：' + params[0].data+ "</br>" + dotaDta2 +'第二行文字介绍：' + params[1].data
    return result
}复制

参考：【官方】echarts配置项series-bar.tooltip.formatter地址