【问题】

调整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地址

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐